javascript - JSX 条件内联样式不起作用

Question

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

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 正在成功应用，但是 styles.clicked 即使我点击 textarea 也没有。此代码不起作用，我需要将 className 属性与 css 一起使用。

Answer 1

尝试下面更新和格式化的代码。在这里，我采用了一个状态变量，即 border 并将其作为 border 传递给 style prop。默认情况下，状态边框为“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;