解决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,  )}>　　　　//这时候可以往里面传入数组下标，然后就实现了功能的复用

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