Question

我试图将条件样式应用于textarea元素。它基于用户点击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 即使单击textarea也不行。这段代码不起作用我需要使用css代替className属性。

Answer 1

尝试以下更新和格式化的代码。在这里，我采用了一个状态变量，即边界，并将其作为边界传递给样式道具。默认状态下，状态边界为＆＃34; 5px实心蓝色＆＃34;当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 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

点击textarea之后没有发生任何事情的原因是因为你没有使用状态组件来处理clicked变量。

了解只要有状态更改就会调用render()函数，这一点非常重要。

因此，您应该将clicked设为州，然后使用this.setState()进行更改。 clicked状态发生变化后，populateField()将再次执行，但此时styles.clicked将会应用。

JSX条件内联样式不起作用

3 个答案: