如何根據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

希望這有助於！