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