我是React JS的新手,我想创建一个ToDo list应用程序。我有App.js
这是主页,因此我为MainBlock
页面创建了App.js
组件,该页面包含布局的左侧和右侧,并且在右侧属性中加载了Form
组件,该组件具有input
和button
并将输入值保存到state
中的数组,并在左侧加载List
组件,该组件具有名为allTasks
的属性,该属性可打印所有任务。
我的问题是如何将allTasks
状态从表单组件转移到App.js
并将其传递给List
组件属性?
在App.js中:
<MainBlock
left={
<List allTasks={['خرید از فروشگاه', 'تعویض دستگیره درب منزل']} />}
right={
<Form />
} />
最佳答案
您可以通过将任务作为状态存储在App组件中,并使Form通过回调属性传递状态来完成此任务。这个概念称为“提升状态”。这是有关它的指南:https://reactjs.org/docs/lifting-state-up.html
<MainBlock
left={
<List allTasks={this.state.allTasks} />
}
right={
<Form onSubmit={allTasks => this.setState({ allTasks })} />
}
/>