我是React JS的新手,我想创建一个ToDo list应用程序。我有App.js这是主页,因此我为MainBlock页面创建了App.js组件,该页面包含布局的左侧和右侧,并且在右侧属性中加载了Form组件,该组件具有inputbutton并将输入值保存到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 })} />
  }
/>

09-10 01:22
查看更多