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

Question

Im在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

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 
    } 

Answer 2

您需要使用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

希望这有助于！