我应该如何更新我通过 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() {

    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.控件的代码如下所示：

<Form.Control

          size="sm"

          type="text"

          defaultValue={this.props.data.data1}

          onChange={(event) => this.props.clicked('data1', event.target.value)}

        />

Answer 2

您可以根据变量设置 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} />