JSX 条件内联样式不起作用

Question

我试图将条件样式应用于 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 正在成功应用，但是 styles.clicked 即使我点击文本区域也没有。此代码不起作用我需要将 className 属性与 css 一起使用。

Answer 1

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

basic: { border: 5px solid blue; }

应该这样引用：

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

Answer 2

试试下面更新和格式化的代码。在这里，我采用了一个状态变量，即 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;

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

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

了解只要 状态发生变化 .

就会调用 render() 函数，这一点非常重要

所以你应该让clicked成为状态，然后用this.setState()来改变它。当clicked状态发生变化时，会再次执行populateField()，但这次会应用styles.clicked。

JSX 条件内联样式不起作用

JSX conditional inline styling doesn't work

javascript

styles

jsx

inline-styles

reactjs