JSX 条件内联样式不起作用答案

【问题标题】：JSX conditional inline styling doesn't workJSX 条件内联样式不起作用
【发布时间】：2018-07-05 10:25:15
【问题描述】：

我试图对 textarea 元素应用条件样式。它基于用户单击文本区域的时间，其样式需要相应更改。因此，我使用一个布尔变量来维护 textarea 的状态，当用户单击该变量时，该变量的值会发生变化，在我的样式属性中，我试图根据该布尔变量的值应用样式。

class InputContainer extends Component {
    let {name,type} = this.props;
    let clicked = false;
    let styles = {
      basic: {
       border: "5px solid blue";
      },
      clicked: {
        border: "2px solid green";
      }
    };
    function populateField() {
       switch(type) {
            case "textBox":
              return (
                <div>

                  <textarea rows="5" name={name} style={Object.assign({}, styles.basic, clicked && styles.clicked)} onClick={()=>{clicked=true;}}>
                  </textarea>
                </div>
              )
              break;
    }


    render() {
       return({populateFields})
    }

    }
    export default InputContainer;

styles.basic 已成功应用，但即使我单击 textarea，styles.clicked 也没有。此代码不起作用，我需要将 className 属性与 css 一起使用。

【问题讨论】：

你应该使用 React 状态来管理你点击的变量。如果你不这样做，当点击值改变时，渲染方法将不会被再次调用。所以你的组件不会自动更新。而不是clicked = true 你应该做this.setState({clicked: true})
谢谢他的工作

标签： javascript reactjs styles jsx inline-styles

【解决方案1】：

试试下面更新和格式化的代码。在这里，我采用了一个状态变量，即边框并将其作为边框传递给样式道具。默认情况下，状态边框具有“5px 纯蓝色”，当 onClick 在 textarea 上触发时，我正在设置新的边框样式。就如此容易。

class InputContainer extends Component {
  constructor(props){
    super(props)
    this.state = {
      border: "5px solid blue"
    }
    this.onClick = this.onClick.bind(this);
  }

  onClick(){
    this.setState({
      border: "2px solid green"
    })
  }
  let {name,type} = this.props;
    function populateField() {
       switch(type) {
          case "textBox":
            return (
              <div>
                <textarea rows="5" name={name} style={{border: this.state.border}} onClick={this.onClick}>
                </textarea>
              </div>
            )
            break;
        }

    render() {  
       return(
          {populateFields}
       )
    }

    }
    export default InputContainer;

【讨论】：

【解决方案2】：

React 内联样式不同于 CSS，例如

basic: { border: 5px solid blue; }

应该这样引用：

basic: { border: "5px solid blue" }

【讨论】：

我错过了帖子中的引号，在我的实际代码中我用引号应用了它。

【解决方案3】：

我帮助你用正确的反应方式重写了整个代码：

import React, { Component } from 'react'

class InputContainer extends Component {
  state = {
    clicked: false
  }

  handleClick = e => {
    this.setState({clicked: true})
  }

  populateField = () => {
    let {name, type} = this.props
    let {clicked} = this.state

    switch (type) {
      case "textBox":
        return (
          <div>
            <textarea
              rows="5"
              name={name}
              style={Object.assign({}, styles.basic, clicked && styles.clicked)}
              onClick={this.handleClick}
            />
          </div>
        )
        break;
    }
  }

  render() {
    return this.populateField()
  }
}

const styles = {
  basic: {
    border: "5px solid blue",
  },
  clicked: {
    border: "2px solid green",
  }
}

export default InputContainer

点击textarea后什么也没发生的原因是你没有使用组件states来处理clicked变量。

了解render() 函数在状态变化时被调用是非常重要的。

因此，您应该将clicked 设为状态，并使用this.setState() 对其进行更改。当clicked 状态发生变化时，populateField() 将再次执行，但这一次将应用styles.clicked。

【讨论】：