我应该如何更新我通过 props 从父级发送的子组件中的数据

Question

我有一个父组件和 4 个子组件(如 SECTION(。从父母我发送到每个孩子自己的设置部分。用户可以在每个子组件中更改这些设置。现在我的问题是当用户通过输入更改文本之类的内容时，我必须更改父级中的原始对象。我知道一种解决方案是为设置中的每个字段发送方法，但每个部分都有 5+ 个字段，所以我认为这不是一个好的解决方案。

这是我的渲染方法的相关部分：

/**
* Render method for user profile
* @return {*}
*/
render() {
return (
<div className={'card p-3 '}>
<h2 className={'text-center mb-2'}>Všeobecné nastavenia</h2>
<Form>
<Form.Row className={'d-flex '}>
<Col md={4} sm={12} className={'order-2 order-md-1'}>
<Form.Group className={'d-flex align-items-center justify-content-end'}>
<Form.Label className={'mb-0 mr-2 customLabel'}><b>Meno:</b></Form.Label>
<Form.Control size="sm" type="text" placeholder="First name"
defaultValue={this.props.userData.firstName}/>
</Form.Group>
<Form.Group className={'d-flex align-items-center justify-content-end'}>
<Form.Label className={'mb-0 mr-2 customLabel'}><b>Priezvisko:</b></Form.Label>
<Form.Control size="sm" type="text" placeholder="Last Name"
defaultValue={this.props.userData.lastName}/>
</Form.Group>
<Form.Group className={'d-flex align-items-center justify-content-end'}>
<Form.Label className={'mb-0 mr-2 customLabel'}><b>Email:</b></Form.Label>
<Form.Control size="sm" type="text" placeholder="Váš email"
defaultValue={this.props.userData.email}/>
</Form.Group>
...

我必须按照之前所说更改父级中的firstName、lastName等值。

有没有好方法可以做到这一点？谢谢你的帮助。

我在CodeSandbox中构建了类似的情况： https://codesandbox.io/s/kind-panini-06qci?file=/src/App.js

Answer 1

您可以根据变量设置 Form 组件的名称，并在事件处理程序中使用它，如下所示：

<Form.Control
name="data1"
size="sm"
type="text"
defaultValue={this.props.data.data1}
onChange={this.props.handleOnChange}
/>

处理程序类似于：

handleOnChange = (e) => {
this.setState({object: {...this.state.object, [e.target.name]: e.target.value}})
}
<Child data={this.state.object} handleOnChange={this.handleOnChange} />

Answer 2

如果要使用子项上的值更新父项的状态，则必须将事件处理程序从父项传递到子项。 如果要解析子项与其父项之间的通信，只需使用两个参数传递和事件处理程序：字段的名称及其值。使用 js，您可以使用点表示法和括号表示法调用字段。在这种情况下，您必须使用括号表示法并将第一个参数作为参数传递，并将第二个参数作为值传递。

一些代码：

在应用程序组件中，渲染如下所示：

render() {
return (
<div className="App">
<Child data={this.state.object} clicked={this.updateValue} />
</div>
);

事件处理程序如下所示：

updateValue = (field, value) => {
let update = {};
update[field] = value;
this.setState({
...this.state,
object: {
...this.state.object,
update
}
});
};

什么意思？该方法要做的第一件事是创建一个包含更新的对象更新，然后执行浅层副本，最后，更新对象将其与更新合并。

子组件中每个 Form.Control 的代码如下所示：

<Form.Control
size="sm"
type="text"
defaultValue={this.props.data.data1}
onChange={(event) => this.props.clicked('data1', event.target.value)}
/>