react(二) 受控组件 react controlled components

受控组件的意思就是每当表单的状态发生变化时，都会被写入组件的state中，这种组件被称为受控组件

普通的组件无法改变输入框的值，那么将input组件和state结合起来再绑定onChange事件，最后再使用state实时更新value值，显示在input中，这样就形成了一个受控组件

在我们的例子中，input的一个类型为radio的单选按钮，根据选中项来设定指定不同的速度，同时根据不同的速度实时去更新单选按钮的选中状态，这样就形成了一个受控组件

//duration是state

<label><input type="radio" name="time" value="0.13" onChange={this.handledurationChange} checked={(this.state.duration == "0.13") ? "checked" : ""}/>快</label>
<label><input type="radio" name="time" value="0.55" onChange={this.handledurationChange} checked={(this.state.duration == "0.55") ? "checked" : ""}/>正常</label>
<label><input type="radio" name="time" value="1" onChange={this.handledurationChange} checked={(this.state.duration == "1") ? "checked" : ""}/>慢</label>

handledurationChange = (event) =>{
this.setState({
duration: event.target.value
})
//此处打印的结果是上一次的duration，因为react会把传进来的state缓存起来，稍后再更新到state上
//因此，如果要在此处使用duration进行运算的话需要另想办法
console.log("duration2:"+ this.state.duration);
}

这样，用户点击不同已经可以选中不同的单选按钮，但是打印出来的duration结果并不是我们期待的更新后的值，而是上一次的值。因为react会把传进来的state缓存起来，把这个对象放入一个更新队列中，稍后才会从队列当中把新的状态提取出来合并到state中，然后再触发组件更新。

虽然此刻获取到的值不是最后的duration的值，但是经过测试，在其他方法中使用duration的时候，其值已经更新，可以正常使用！

另外，如果想在此刻使用新的duration的值进行计算，那么可以引出setstate的另一种使用方法，就是接收一个函数作为参数

handledurationChangeTest = (event) =>{
this.setState((prevState) => {
return{duration:0}
})
this.setState((prevState) => {
return{duration: prevState.duration+1}
})
console.log("duration2:"+ this.state.duration);
}

测试代码是可以正常显示duration的变化，说明使用函数进行传参的方法是可行的！

react(二) 受控组件 react controlled components

猜你喜欢