我有一个使用函数式编程更新输入的受控组件,我想知道我是否需要这样做:
class ScreensEditSeries extends Component{
constructor(props){
super(props)
this.state = {
id: '',
name: '',
status: '',
genre: '',
notes: ''
}
}
...
handleChange = field => event => {
this.setState({
...this.state, //is necessary do this for return a new full state?
[field] : event.target.value
})
}
...
render(){
return(
...
Name: <input type="text" value={this.state.name} onChange={this.handleChange('name')} className="form-control" /><br />
Status: {<span> </span>}
<select value={this.state.status} onChange={this.handleChange('status')}>
{Object.keys(statsuser)
.map( key => <option key={key}>{statsuser[key]}</option>)}
</select><br/><br/>
Genre: {<span> </span>}
<select value={this.state.genre} onChange={this.handleChange('genre')}>
{Object.keys(statsgenre)
.map(key => <option key={key}>{statsgenre[key]}</option>)}
</select><br/><br/>
Notes: <textarea type='text' value={this.state.notes} onChange={this.handleChange('notes')} className="form-control"></textarea><br />
...
)}
我正在学习函数式编程,我认为有必要在更新之前传播状态以产生新的状态,而不是仅仅更新它。但是这需要更多的内存和cpu进程。是否建议这样做?
最佳答案
不,这不是必需的,setState
只会修改您提供的 JSON 中给定的变量。在您的情况下,只会修改 field
值的属性。
除非您想修改嵌套属性,否则不需要解构状态。
关于javascript - 如何开始使用 React 进行函数式编程?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54093888/