JSX 条件内联样式不起作用

Question

我试图将条件样式应用于文本区域元素。它基于用户单击文本区域的时间，其样式需要相应地更改。所以我使用布尔变量维护文本区域的状态，当用户单击时值会发生变化，在我的样式属性中，我正在尝试应用基于此布尔变量值的样式。

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 一起使用。

Answer 1

尝试以下更新和格式化的代码。在这里，我采用了一个状态变量，即边框并将其作为样式道具的边框传递。默认情况下，州边框具有"5px 纯蓝色"，当 onClick 在文本区域触发时，我正在设置新的边框样式。就这么简单。

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;

Answer 2

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

basic: { border: 5px solid blue; }

应该这样引用：

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

Answer 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

---

单击文本区域后没有任何反应的原因是，您没有使用组件状态来处理clicked变量。

了解每当状态更改时都会调用render()函数非常重要。

因此，您应该clicked成为一种状态，并使用this.setState()来更改它。当clicked状态更改时，将再次执行populateField()，但这次将应用styles.clicked。