如何在React中访问孩子的状态？

Question

我有以下结构：

FormEditor-包含多个FieldEditor- FieldEditor编辑表单的字段并在其状态下保存有关该字段的各种值

在FormEditor中单击按钮时，我希望能够从所有FieldEditor组件中收集有关字段的信息，处于其状态的信息，并将其全部包含在FormEditor中。

我考虑过将有关字段信息的信息存储在FieldEditor的状态之外，FormEditor而是将其置于的状态。但是，这将需要FormEditor在FieldEditor组件的每个组件发生更改时侦听它们并以其状态存储其信息。

我不能只访问儿童的州吗？理想吗？

Answer 1

如果您已经具有用于单个FieldEditor的onChange处理函数，那么我不明白为什么您不能只将状态移到FormEditor组件上，而仅将回调从那里传递给FieldEditor，以更新父状态。对我来说，这似乎是一种更React-
y的方式。

可能与此类似：

const FieldEditor = ({ value, onChange, id }) => {
  const handleChange = event => {
    const text = event.target.value;
    onChange(id, text);
  };

  return (
    <div className="field-editor">
      <input onChange={handleChange} value={value} />
    </div>
  );
};

const FormEditor = props => {
  const [values, setValues] = useState({});
  const handleFieldChange = (fieldId, value) => {
    setValues({ ...values, [fieldId]: value });
  };

  const fields = props.fields.map(field => (
    <FieldEditor
      key={field}
      id={field}
      onChange={handleFieldChange}
      value={values[field]}
    />
  ));

  return (
    <div>
      {fields}
      <pre>{JSON.stringify(values, null, 2)}</pre>
    </div>
  );
};

// To add abillity to dynamically add/remove fields keep the list in state
const App = () => {
  const fields = ["field1", "field2", "anotherField"];

  return <FormEditor fields={fields} />;
};

原始-钩前版本：

class FieldEditor extends React.Component {

  constructor(props) {

    super(props);

    this.handleChange = this.handleChange.bind(this);

  }



  handleChange(event) {

    const text = event.target.value;

    this.props.onChange(this.props.id, text);

  }



  render() {

    return (

      <div className="field-editor">

        <input onChange={this.handleChange} value={this.props.value} />

      </div>

    );

  }

}



class FormEditor extends React.Component {

  constructor(props) {

    super(props);

    this.state = {};



    this.handleFieldChange = this.handleFieldChange.bind(this);

  }



  handleFieldChange(fieldId, value) {

    this.setState({ [fieldId]: value });

  }



  render() {

    const fields = this.props.fields.map(field => (

      <FieldEditor

        key={field}

        id={field}

        onChange={this.handleFieldChange}

        value={this.state[field]}

      />

    ));



    return (

      <div>

        {fields}

        <div>{JSON.stringify(this.state)}</div>

      </div>

    );

  }

}



// Convert to class component and add ability to dynamically add/remove fields by having it in state

const App = () => {

  const fields = ["field1", "field2", "anotherField"];



  return <FormEditor fields={fields} />;

};



ReactDOM.render(<App />, document.body);