反应–将表单元素状态传递给同级/父元素的正确方法？

神无LEY2020-03-11

假设我有一个React类P，它渲染了两个子类C1和C2。
C1包含一个输入字段。我将此输入字段称为Foo。
我的目标是让C2对Foo的变化做出反应。

我已经提出了两种解决方案，但是它们都不对。

第一个解决方案：

为P分配一个状态，state.input。
onChange在P中创建一个函数，该函数接受一个事件并设置state.input。
onChange将其作为传递给C1 props，然后让C1绑定this.props.onChange到onChangeFoo。

这可行。每当Foo的值更改时，它都会触发setStateP中的a，因此P会将输入传递给C2。

但是由于相同的原因，感觉不太正确：我正在从子元素中设置父元素的状态。这似乎背叛了React的设计原理：单向数据流。
这是我应该怎么做，还是有一个更自然的React解决方案？

第二种解决方案：

只需将Foo放在P中即可。

但这是我在构建应用程序时应遵循的设计原则—将所有表单元素都放在render最高级别的类中？

就像在我的示例中一样，如果我渲染了很大的C1，我真的不想仅将renderC1 放在renderP中就因为C1具有表单元素。

我该怎么办？

LEY神无2020/03/11 10:58:54

我很惊讶，在我撰写本文时，没有一个简单的惯用React解决方案的答案。所以这是一个（将大小和复杂度与其他进行比较）：

class P extends React.Component {
    state = { foo : "" };

    render(){
        const { foo } = this.state;

        return (
            <div>
                <C1 value={ foo } onChange={ x => this.setState({ foo : x })} />
                <C2 value={ foo } />
            </div>
        )
    }
}

const C1 = ({ value, onChange }) => (
    <input type="text"
           value={ value }
           onChange={ e => onChange( e.target.value ) } />
);

const C2 = ({ value }) => (
    <div>Reacting on value change: { value }</div>
);

我正在从子元素设置父元素的状态。这似乎背叛了React的设计原理：单向数据流。

任何受控的input（在React中使用表单的惯用方式）都会在其onChange回调中更新父状态，并且仍然不会出卖任何东西。

例如，仔细查看C1组件。您是否看到C1内置input组件处理状态更改的方式有何重大不同？您不应该，因为没有。对于原始React来说，提升状态并传递值/ onChange对是惯用的。如某些答案所示，不使用裁判。

阳光猿2020/03/11 10:58:54

解释了将数据从父级传递到子级，反之亦然的概念。

import React, { Component } from "react";
import ReactDOM from "react-dom";

// taken refrence from https://gist.github.com/sebkouba/a5ac75153ef8d8827b98

//example to show how to send value between parent and child

//  props is the data which is passed to the child component from the parent component

class Parent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldVal: ""
    };
  }

  onUpdateParent = val => {
    this.setState({
      fieldVal: val
    });
  };

  render() {
    return (
      // To achieve the child-parent communication, we can send a function
      // as a Prop to the child component. This function should do whatever
      // it needs to in the component e.g change the state of some property.
      //we are passing the function onUpdateParent to the child
      <div>
        <h2>Parent</h2>
        Value in Parent Component State: {this.state.fieldVal}
        <br />
        <Child onUpdate={this.onUpdateParent} />
        <br />
        <OtherChild passedVal={this.state.fieldVal} />
      </div>
    );
  }
}

class Child extends Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldValChild: ""
    };
  }

  updateValues = e => {
    console.log(e.target.value);
    this.props.onUpdate(e.target.value);
    // onUpdateParent would be passed here and would result
    // into onUpdateParent(e.target.value) as it will replace this.props.onUpdate
    //with itself.
    this.setState({ fieldValChild: e.target.value });
  };

  render() {
    return (
      <div>
        <h4>Child</h4>
        <input
          type="text"
          placeholder="type here"
          onChange={this.updateValues}
          value={this.state.fieldVal}
        />
      </div>
    );
  }
}

class OtherChild extends Component {
  render() {
    return (
      <div>
        <h4>OtherChild</h4>
        Value in OtherChild Props: {this.props.passedVal}
        <h5>
          the child can directly get the passed value from parent by this.props{" "}
        </h5>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, document.getElementById("root"));