解决react不能往setState中传key作为参数的办法

Posted 2020-09-29

有时候我们需要每次单独设置众多state中的一个，但是，都是进行相同的操作，这时候如果每个值都要单独写一个相同的函数的话，违背了don‘t repeat yourself的原则，并给日后的维护埋下了极大的隐患。

这时我们就会想向上抽取，把每次不同的key传递给这个函数，就像下面这样：

this.state = {

　　visibleA: false,

　　visibleB: false,

　　visibleC: false,

}

<button onClick = {this.handleClick.bind( this, "visibleA" )}>

 

handleClick( key )  {

　　this.setState({

　　　　key :  fooArr,

　　});

}

但是因为key不能作为参数传递，然后会无效；因为我们传递给key的实际就是字符串；

=================================================我是华丽的分割线==========================================================

然后经过思考，发现可以尝试使用数组的形式，方法如下

 

this.state = {

　　//设置状态

　　visibleAll: [false, false,false],

}

<button onClick = {this.handleClick.bind( this, 0 )}>　　　　//这时候可以往里面传入数组下标，然后就实现了功能的复用

handleClick( i ) {

　　let fooArr = this.state.visibleAll; 　　

　　fooArr[ i ] = !fooArr[ i ];　　　　

　　this.setState({

　　　　visibleAll: fooArr,

　　});

}

 

总结：然后不能传入key值，但是可以通过把需要操作的值放入一个数组中，这样我们就可以对整个数组中的一个值或者多个值，实现一个函数对其进行操作；实现复用功能。