我正在使用 React 创建一个待办事项列表应用程序，此阶段不涉及后端。目前我有两个组件，Type和ListTable. Type是一个表单组件，ListTable是一个表格组件，用于显示存储在this.state.
我想实现的是，当我在表单中输入，点击submit按钮Type组件，该state数据Type将作为传递props到ListTable组件和表数据将发生相应的变化。但我不知道如何做到这一点，而是refresh在ListTable组件中添加了一个额外的按钮，以调用组件中的onSubmitt函数Type。这种方式有效，但我认为不是很体面。
我会在这里提出不同的组件架构。你看，你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而不是状态。