Question

我使用React创建待办事项列表应用程序，此阶段不涉及后端。目前我有两个组件pd.concat([df1.set_index('id'),df2.set_index('user_id')],1).reset_index() Out[38]: index name country gender 0 1 Cyrus MY female 1 2 May US male和Type。 ListTable是表单组件，Type是一个表组件，用于显示ListTable中存储的数据。

我想要实现的是，在我输入表单后，点击this.state组件中的submit按钮，Type中的state数据将作为{{1}传递到Type组件，表数据将相应更改。但是我不知道如何执行此操作，而是在props组件中添加了一个额外的按钮ListTable，以便在refresh组件中调用ListTable函数。我认为这种方式有效但不太合适。

这是我的代码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);
}

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

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

并声明这个处理程序如下：

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

您的ListTable's table函数也应该遍历props.todos而不是状态。

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

1 个答案: