我有一个带有表单的子组件。当用户提交表单时,我需要更新顶级组件中的状态。
通过阅读文档,我相信正确的方法是创建一个函数来更新父组件中的状态,然后通过执行它的props将其传递给子组件。
在我的孩子组件中:
submit(e) {
e.preventDefault();
const setLength = parseInt(this.setLength.value.slice(0, -1));
const restLength = parseInt(this.restLength.value.slice(0, -1));
const noOfSets = parseInt(this.noOfSets.value);
const noOfRounds = parseInt(this.noOfRounds.value);
this.props.run(setLength, restLength, noOfSets, noOfRounds);
}
在我的父组件中:
run(setLength, restLength, noOfSets, noOfRounds) {
this.setState({
setLength,
restLength,
noOfRounds,
noOfSets,
setTimeRemaining: setLength,
restTimeRemaining: restLength,
currentSet: 1,
currentRound: 1,
resting: false
}, () => {
this.updateProgress('running');
});
}
render() {
return (
<Child run={this.run}/>
我上面的代码有效,但似乎很容易出错。如果我在任一函数中更改setLength, restLength, noOfSets, noOfRounds
的顺序,则将设置错误的值。因此,我应该传递一个具有键值对的对象吗?或者我从根本上以错误的方式解决这个问题