Question

我在ReactJS中编写了一个项目。我有一些可以被用户点击的div。默认情况下，每个div的背景颜色应设置为绿色，但在单击后它应该变为红色（意味着已经单击此特定div并进一步单击它将没有任何区别）。我设置CSS类的想法是在className里面我有一个基于数组中相应值的三元if语句。我提出的解决方案没有做任何事情，没有出现任何错误。我怎样才能实现目标？

代码：

var style = require('./board.css');

var React = require('react');

class board extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            fieldClicksArray: [
                false, false, false, 
                false, false, false, 
                false, false, false
            ]
        }
    }

    handleClick(index) {
      if (this.state.fieldClicksArray[index] === false) {
          this.state.fieldClicksArray[index] = true;
    }

    render () {
        return (
            <div className="parent">
                    <div className={this.state.fieldClicksArray[0] ? 'red' : 'green'} onClick={() => this.handleClick(0)}>1</div>
            </div>//parent
        )//return
    }//render
}//class

export default board;

CSS：

.red {
    background-color: red;
}

.green {
    background-color: green;
}

Answer 1

您需要使用setState()。并克隆数组，以便您不会改变以前的状态。最后，当您从下一个状态计算下一个状态时，最好使用setState()的函数形式。

handleClick(index) {
  this.setState((prevState) => {
    // make a copy
    let fieldClicksArray = prevState.fieldClicksArray.slice();
    // change one item
    fieldsClickArray[index] = true;
    // return next state to be merged
    return { fieldsClickArray };
  });
}

了解详情：https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly

希望这有帮助！

Answer 2

class Board extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            fieldClicksArray: [
                false, false, false, 
                false, false, false, 
                false, false, false
            ]
        }
    }

    handleClick(index) {
      if (this.state.fieldClicksArray[index] === false) {
          var newArray = this.state.fieldClicksArray;
          newArray[index] = true;

          this.setState({
              fieldClicksArray: newArray
           })
           }
    }

    render(){
        return(
            <div className="parent">
                <div className={this.state.fieldClicksArray[0] ? 'red' : 'green'} onClick= {()=>this.handleClick(0)}>1</div>
        </div>//parent
        )//return
    }//render
}//class

ReactDOM.render(<Board />, document.getElementById("app"))

.red {
    background-color: red;
}

.green {
    background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

this.state.fieldClicksArray[index] = true;不执行任何操作。您需要致电this.setState来更改组件的状态。

handleClick(index) {
      if (this.state.fieldClicksArray[index] === false) {
          var newArray = this.state.fieldClicksArray;
          newArray[index] === false;

          this.setState({
              fieldClicksArray: newArray
           })
    }

另外要在点击处理程序中使用setState方法，您需要将函数绑定到组件，

 render () {
        return (
            <div className="parent">
                <div className={this.state.fieldClicksArray[0] ? 'red' : 'green'} onClick= {()=>this.handleClick(0)}>1</div>
        </div>//parent
        )//return
    }

如何在ReactJS中根据状态变量的值分配CSS类

2 个答案: