解决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", "须要传递的值")}>
从而实现：一个方法，修改全部状态的属性，和全部值
到这里就很简单了，我就再也不写了！