解決react不能往setState中傳key做爲參數的辦法（文章最後實現了傳遞key作參數的辦法）

讀者朋友能夠直接看最後一個分割線下面的那部分！利用方括號語法來動態的訪問對象的屬性，實現當參數爲屬性名的傳遞;

有時候咱們須要每次單獨設置衆多state中的一個，可是，都是進行相同的操做，這時候若是每一個值都要單獨寫一個相同的函數的話，違背了don't repeat yourself的原則，並給往後的維護埋下了極大的隱患。

這時咱們就會想向上抽取，把每次不一樣的key傳遞給這個函數，就像下面這樣：

this.state = {

　　visibleA: false,

　　visibleB: false,

　　visibleC: false,

}

<button onClick={this.handleClick.bind(this, "visibleA")}>我想改變"visibleA"的值</button>

 

handleClick( key )  {

　　this.setState({

　　　　key :  true,

　　});

}

可是由於key不能做爲參數傳遞，而後會無效；由於咱們傳遞給key的實際就是字符串；

=================================================我是華麗的分割線==========================================================

而後通過思考，發現能夠嘗試使用數組的形式，方法以下

 

this.state = {

　　//設置狀態

　　visibleAll: [false, false,false],

}

<button onClick = {this.handleClick.bind( this, 0 )}>　　　　//這時候能夠往裏面傳入數組下標，而後就實現了功能的複用

handleClick( i ) {

　　let fooArr = this.state.visibleAll; 　　

　　console.log( fooArr  === this.state.visibleAll )　　//結果是：true,兩個指向同一個實體；

　　fooArr[ i ] = !fooArr[ i ];　　　　　　　　　　　　  //實現傳入參數下標的值的更改；

　　this.setState({　　　　　　　　　　　　　　　　   //雖然不操做此步時，已經實現了this.state.visibleAll 的改變，但修改狀態必需要經過setState修改，纔會觸發相關的render方法，實現視圖的改變，因此這一步不能省

　　　　visibleAll: fooArr,

　　});

}

 

總結：而後不能傳入key值，可是能夠經過把須要操做的值放入一個數組中，這樣咱們就能夠對整個數組中的一個值或者多個值，實現一個函數對其進行操做；實現複用功能。

=================================================我仍是華麗的分割線======20170823修改====================================================

通過後續的工做，發現其實上面的那個方式有不少雞肋，好比咱們僅能經過  [ i ]  來表達參數，不能作到語義化；

因此，其實大部分可使用直接傳遞值的方式，

　　ex:　　

-----------------------js-------------------

　　　　handleClick(arg) {

　　　　　　this.setState({　

　　　　　　　　visibleAll: arg,

　　　　　　});

　　　　}

-----------------------html-------------------
　　<button onClick = {this.handleClick.bind( this, false )}>我能改變屬性值爲false</button>　　　　//這時候能夠往裏面傳入值，而後也能夠實現複用，並且函數都時對特定對象的操做，功能更加單一

=================================================我仍是華麗的分割線======20170828修改====================================================

終極總結：

　　通過這幾天的學習，發現了一個知識點：方括號語法來動態的訪問對象的屬性;

　　即：如果屬性名是動態的（好比變量中），只能使用 [] 寫法，而不能使用「點」語法訪問

　　因此，咱們能夠直接解決文章最開頭拋出的問題，實現傳遞對象的key(屬性名)的方式，實現方法的高通用性；

事例代碼以下：

import React from 'react';
import HeaderCom_son from './header_1.js';

export default class HeaderCom extends React.Component {
   constructor(props) {
      super(props)
      this.state = {
         visibleA: false,
         visibleB: false,
         visibleC: false,
      }
   }
   handleClick(key) {
      this.setState((prevS,props)=>({
         [key]: !prevS[key]
      }));
   }
   render() {
      return (
         <div>
            <div >visibleA-----{this.state.visibleA.toString()}</div>
            <div >visibleB-----{this.state.visibleB.toString()}</div>
            <div >visibleC-----{this.state.visibleC.toString()}</div>
            <button onClick={this.handleClick.bind(this, "visibleA")}>我會執行this.handleClick.bind(this, "visibleA")</button>
            <button onClick={this.handleClick.bind(this, "visibleB")}>我會執行this.handleClick.bind(this, "visibleB")</button>
            <button onClick={this.handleClick.bind(this, "visibleC")}>我會執行this.handleClick.bind(this, "visibleC")</button>
         </div>
      );
   }
}

頁面以下圖：

點擊三個按鈕分別都會改變對應的狀態值；

實現僅僅須要一個方法，就能夠改變全部狀態的true / false 的切換 

其實再思考如下，咱們能夠再添加一個參數，

 <button onClick={this.handleClick.bind(this, "visibleA", "須要傳遞的值")}>
從而實現：一個方法，修改全部狀態的屬性，和全部值
到這裏就很簡單了，我就再也不寫了！