【发布时间】：2019-02-14 03:56:56
【问题描述】：
我正在使用 React 处理表单。我的想法是创建一个可重用的表单组件，该组件从页面组件中获取状态作为道具，并将保存使用子数据更新其自身状态的逻辑，并将其发送到父页面组件。
页面组件是这样的：
class Page extends Component {
constructor(props) {
super(props);
this.state = {
data: {
text1: "Initial text1",
text2: "Initial text2"
}
};
}
render() {
return (
<div className="Page">
<div className="DataPreview">
Data preview in Page component
<div>{this.state.data.text1}</div>
<div>{this.state.data.text2}</div>
</div>
<Form data={this.state.data}>
<Input id="text1" data={this.state.data.text1} />
<Input id="text2" data={this.state.data.text2} />
</Form>
</div>
);
}
}
这是表单组件：
class Form extends Component {
constructor(props) {
super(props);
this.state = this.props.data;
}
render() {
return (
<div className="Parent">
<div>Form component</div>
<div className="DataPreview">
Data preview in Form component
<div>{this.state.text1}</div>
<div>{this.state.text2}</div>
</div>
{this.props.children}
</div>
);
}
}
这是 Input 组件：
class Input extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="Child" id={this.props.id}>
<div>Input component</div>
<input id={this.props.id} type="text" value={this.props.data} />
</div>
);
}
}
所以 Input 应该更新 Form 状态，Form 应该更新 Page 状态。我知道当 Input 在 Form 组件内写入时如何传递回调，但我不知道在 Page 组件内写入时如何做，就像在这种情况下一样。
我有一个沙盒供感兴趣的人使用：https://codesandbox.io/s/qx6kqypo09
【问题讨论】：
-
尝试使用 Redux 或 Flux。这样会更好。
-
我没说的是我的Page组件是通过Connector组件从Redux获取数据的。但是，在这种情况下，您将如何利用 Redux？
-
不要遵循这个逻辑。这不是 React 的工作方式。你看不到很多这样的应用程序。如果您需要更新父级的状态，只需像您想的那样使用处理函数即可。另外，为什么你的
Input组件还是个孩子？可以直接在Form组件中使用。 -
你可以使用 react 'context'
-
@devserkan 这个想法是表单只负责更新输入的数据。我希望它是可重用的，所以我不能在 Form 组件中编写输入。否则，我最终会为我的项目中的每个特定表单使用一个表单组件，这不是 DRY。在我的情况下，如何向子组件添加处理程序函数？
标签： javascript reactjs forms