我正在使用 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
而不是状态。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句