如何将表单输入字段传递给 React 中的另一个组件？

Question

我正在使用 React 创建一个待办事项列表应用程序，此阶段不涉及任何后端。目前我有两个组件，Type 和ListTable。 Type 是一个表单组件，ListTable 是一个表格组件，显示存储在this.state 中的数据。

我想要实现的是，在我输入表单后，点击Type组件中的submit按钮，Type中的state数据将作为props传递给ListTable组件和表格数据会相应改变。但我不知道该怎么做，而是在ListTable 组件中添加了一个附加按钮refresh，以调用Type 组件中的onSubmitt 函数。这种方式行得通，但我认为不太体面。

这是我的代码https://codepen.io/heiweigou/pen/vRKjzR?editors=0010

Answer 1

我会在这里提出一个不同的组件架构。你看，你的ListTable 是一个子Type 组件，尽管这不是最好的方法。
创建一个新组件，它将成为两者的父组件，例如

class ParentComponent extends Component {
   constructor(props) {
      super(props);

      this.state = { todos: [] };
      this.addTodo = this.addTodo.bind(this);
   }

   addTodo(todo) {
      this.setState({ todos: [...this.state.todos, todo] })
   }
   ...
   render() {
      return (
         <div>
           <ListTable todos={this.state.todos} /> //passing todos
           <Type addTodo={this.addTodo} /> //passing a addTodo function
         </div>
      );
   }
}

您可以向您的Type 组件传递一个函数来更新ParentComponent 的状态，并将该状态传递给ListTable 组件以呈现您的待办事项。
而Type 组件的onSubmit 函数应该只更新其父组件的状态，不应该返回任何东西。

onSubmit() {
   this.props.addTodo(this.state);
}

更新：
从Task 的添加按钮中删除onClick 处理程序并将onSubmit 处理程序添加到表单：

<form onSubmit={this.handleFormSubmit.bind(this)}>

并像这样声明这个处理程序：

handleFormSubmit(e) {
  e.preventDefault();
  this.props.addTodo(this.state);
}

您的ListTable's table 函数还应该循环通过props.todos 而不是状态。