读者朋友可以直接看最后一个分割线下面的那部分！利用方括号语法来动态的访问对象的属性，实现当参数为属性名的传递;
有时候我们需要每次单独设置众多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", "需要传递的值")}>
从而实现：一个方法，修改所有状态的属性，和所有值
到这里就很简单了，我就不再写了！