解決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", "需要傳遞的值")}>
從而實現：一個方法，修改所有狀態的屬性，和所有值
到這里就很簡單了，我就不再寫了！