如何在React中访问孩子的状态？ [英] How to access child's state in React?

问题描述

我有以下结构：

FormEditor - 持有多个FieldEditor
FieldEditor - 编辑表单的一个字段并在其状态中保存有关它的各种值

FormEditor - holds multiple FieldEditor FieldEditor - edits a field of the form and saving various values about it in it's state

当在FormEditor中单击一个按钮时，我希望能够从所有 FieldEditor 组件收集有关字段的信息，这些信息属于其状态，并且全部都在FormEditor中。

When a button is clicked within FormEditor, I want to be able to collect information about the fields from all FieldEditor components, information that's in their state, and have it all within FormEditor.

我考虑过存储 FieldEditor 以外的字段的信息并将其放入 FormEditor 而是州。但是，这需要 FormEditor 来监听每个 FieldEditor 组件，因为它们会更改并将信息存储在其状态中。

I considered storing the information about the fields outside of FieldEditor's state and put it in FormEditor's state instead. However, that would require FormEditor to listen to each of it's FieldEditor components as they change and store their information in it's state.

我不能只是访问孩子的州吗？这是理想的吗？

Can't I just access the children's state instead? Is it ideal?

推荐答案

如果您已经拥有单个FieldEditors的onChange处理程序，我不明白为什么你不能将状态移动到FormEditor组件，然后将回调从那里传递给将更新父状态的FieldEditors。对我来说，这似乎是一种更React-y方式。

If you already have onChange handler for the individual FieldEditors I don't see why you couldn't just move the state up to the FormEditor component and just pass down a callback from there to the FieldEditors that will update the parent state. That seems like a more React-y way to do it, to me.

这可能是这样的：

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 abillity 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);

http://jsbin.com/qeyoxobixa/edit?js,output

编辑：而不是将FieldEditor元素作为子元素传递给FormEditor我只需传递一个fieldId列表，然后在FormEditor中创建它们。这样可以更容易地动态添加FieldEditors并使FormEditor的render方法更少winkey。

Instead of passing FieldEditor elements as children to FormEditor I Just pass a list of fieldIds and create them in the FormEditor instead. This makes it easier to dynamically add FieldEditors and makes the render method of FormEditor less wonkey.

这篇关于如何在React中访问孩子的状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！