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

Question

我有一个父组件和4个子组件（如PARTCES）。从父母我发送到每个孩子自己的设置部分。用户可以在每个子组件中更改这些设置。现在我的问题是，当用户通过输入更改文本之类的东西时，我必须更改父级中的原始对象。我知道一个解决方案是为设置中的每个字段发送方法，但每个部分都有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>

...

我必须像前面说的那样改变，等等，在父母中值。firstNamelastName

有没有一个很好的方法来做到这一点？谢谢你的帮助。

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

Answer 1

如果要使用子项上的值更新父项的状态，则必须将事件处理程序从父项传递到子项。如果要解析子项与其父项之间的通信，只需使用两个参数传递和事件处理程序：字段名称及其值。使用js，您可以使用点表示法和括号表示法调用字段。在这种情况下，您必须使用括号表示法，并将第一个参数作为参数传递，并作为值来存储第二个参数。一些代码：在应用组件中，渲染如下所示：render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <Child data={this.state.object} clicked={this.updateValue} />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );事件处理程序如下所示：&nbsp;updateValue = (field, value) => {&nbsp; &nbsp; let update = {};&nbsp; &nbsp; update[field] = value;&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; ...this.state,&nbsp; &nbsp; &nbsp; object: {&nbsp; &nbsp; &nbsp; &nbsp; ...this.state.object,&nbsp; &nbsp; &nbsp; &nbsp; update&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; };这是什么意思？该方法要做的第一件事是创建一个包含更新的对象更新，然后它执行浅层复制，最后，更新对象将其与更新合并。子组件中每个 Form.控件的代码如下所示：<Form.Control&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size="sm"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; defaultValue={this.props.data.data1}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(event) => this.props.clicked('data1', event.target.value)}&nbsp; &nbsp; &nbsp; &nbsp; />

Answer 2

您可以根据变量设置 Form 组件的名称，并在事件处理程序中使用它，如下所示：<Form.Control&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="data1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size="sm"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; defaultValue={this.props.data.data1}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.props.handleOnChange}&nbsp; &nbsp; &nbsp; &nbsp; />处理程序类似于：&nbsp;handleOnChange = (e) => {&nbsp; &nbsp; this.setState({object: {...this.state.object, [e.target.name]: e.target.value}})&nbsp; }<Child data={this.state.object} handleOnChange={this.handleOnChange} />