blocks|key|4544110|text|如果您已经有了单个FieldEditors的onChange处理程序，我不明白为什么您不能将状态向上移动到FormEditor组件，然后从那里向下传递一个将更新父状态的FieldEditors回调。对我来说，这似乎是一种更具反应性的方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4544111|大概是这样的：|4544112|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+the+ability+to+dynamically+add/remove+fields,+keep+the+list+in+state
const+App+=+()+=>+{
++const+fields+=+["field1",+"field2",+"anotherField"];

++return+<FormEditor+fields={fields}+/>;
};|code-block|syntax|javascript|4544113|原始-预钩版本：|4544114|​|4544115|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+a+class+component+and+add+the+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);|4544116|4544117|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|U|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|V|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|O|3|L|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>If you already have an 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.</p>
<p>Something along the line of this perhaps:</p>
<pre class="lang-js prettyprint-override"><code>const FieldEditor = ({ value, onChange, id }) =&gt; {
  const handleChange = event =&gt; {
    const text = event.target.value;
    onChange(id, text);
  };

  return (
    &lt;div className=&quot;field-editor&quot;&gt;
      &lt;input onChange={handleChange} value={value} /&gt;
    &lt;/div&gt;
  );
};

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

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

  return (
    &lt;div&gt;
      {fields}
      &lt;pre&gt;{JSON.stringify(values, null, 2)}&lt;/pre&gt;
    &lt;/div&gt;
  );
};

// To add the ability to dynamically add/remove fields, keep the list in state
const App = () =&gt; {
  const fields = [&quot;field1&quot;, &quot;field2&quot;, &quot;anotherField&quot;];

  return &lt;FormEditor fields={fields} /&gt;;
};
</code></pre>
<p>Original - pre-hooks version:</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 (
      &lt;div className="field-editor"&gt;
        &lt;input onChange={this.handleChange} value={this.props.value} /&gt;
      &lt;/div&gt;
    );
  }
}

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 =&gt; (
      &lt;FieldEditor
        key={field}
        id={field}
        onChange={this.handleFieldChange}
        value={this.state[field]}
      /&gt;
    ));

    return (
      &lt;div&gt;
        {fields}
        &lt;div&gt;{JSON.stringify(this.state)}&lt;/div&gt;
      &lt;/div&gt;
    );
  }
}

// Convert to a class component and add the ability to dynamically add/remove fields by having it in state
const App = () =&gt; {
  const fields = ["field1", "field2", "anotherField"];

  return &lt;FormEditor fields={fields} /&gt;;
};

ReactDOM.render(&lt;App /&gt;, document.body);</code></pre>
</div>
</div>
</p>


blocks|key|4544139|text|在我详细介绍如何访问子组件的状态之前，请务必阅读Markus-ipse关于处理此特定场景的更好解决方案的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4544140|如果您确实希望访问组件的子项的状态，则可以为每个子项分配一个名为ref的属性。现在有两种方法来实现引用:使用React.createRef()和回调引用。|style|CODE|4544141|使用React.createRef()|4544142|从React+16.3开始，这是目前推荐的使用引用的方式(有关更多信息，请参阅the+documentation+)。如果您使用的是较早的版本，请参阅下面有关回调引用的内容。|4544143|您需要在父组件的构造函数中创建一个新的引用，然后通过ref属性将其分配给子组件。|4544144|class+FormEditor+extends+React.Component+{
++constructor(props)+{
++++super(props);
++++this.FieldEditor1+=+React.createRef();
++}
++render()+{
++++return+<FieldEditor+ref={this.FieldEditor1}+/>;
++}
}|code-block|syntax|javascript|4544145|为了访问这种ref，您需要使用：|4544146|const+currentFieldEditor1+=+this.FieldEditor1.current;|4544147|这将返回已挂载组件的一个实例，这样您就可以使用currentFieldEditor1.state访问该状态。|4544148|简单地说，如果您在DOM节点而不是组件(例如<div+ref={this.divRef}+/>)上使用这些引用，那么this.divRef.current将返回底层DOM元素而不是组件实例。|4544149|回调引用|4544150|此属性接受一个回调函数，该函数被传递一个对附加组件的引用。此回调在组件挂载或卸载后立即执行。|4544151|例如：|4544152|<FieldEditor
++++ref={(fieldEditor1)+=>+{this.fieldEditor1+=+fieldEditor1;}
++++{...props}
/>|4544153|在这些示例中，引用存储在父组件上。要在代码中调用此组件，可以使用：|4544154|this.fieldEditor1|4544155|然后使用this.fieldEditor1.state获取状态。|4544156|需要注意的一件事是，在尝试访问%5E_%5E之前，请确保子组件已经呈现|4544157|如上所述，如果您在DOM节点而不是组件(例如<div+ref={(divRef)+=>+{this.myDiv+=+divRef;}}+/>)上使用这些引用，那么this.divRef将返回底层DOM元素而不是组件实例。|4544158|更多信息|4544159|如果你想了解有关React的ref属性的更多信息，请查看Facebook上的this+page。|4544160|确保你阅读了"Don't+Overuse+Refs“一节，其中说你不应该使用孩子的state来”让事情发生“。|4544161|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/27875018/4721085|1|https://reactjs.org/docs/refs-and-the-dom.html#creating-refs|2|https://facebook.github.io/react/docs/refs-and-the-dom.html|3|https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs^0|O|B|0|0|W|3|1I|H|0|2|H|0|13|H|1|0|Q|3|0|0|0|0|N|P|0|M|P|1M|J|0|0|0|0|0|0|0|4|N|0|0|M|1C|29|B|0|0|12|9|2|0|15|5|7|I|3|0^^$0|@$1|2|3|4|5|6|7|22|8|@]|9|@$A|23|B|24|1|25]]|C|$]]|$1|D|3|E|5|6|7|26|8|@$A|27|B|28|F|G]|$A|29|B|2A|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|2B|8|@$A|2C|B|2D|F|G]]|9|@]|C|$]]|$1|J|3|K|5|6|7|2E|8|@]|9|@$A|2F|B|2G|1|2H]]|C|$]]|$1|L|3|M|5|6|7|2I|8|@$A|2J|B|2K|F|G]]|9|@]|C|$]]|$1|N|3|O|5|P|7|2L|8|@]|9|@]|C|$Q|R]]|$1|S|3|T|5|6|7|2M|8|@]|9|@]|C|$]]|$1|U|3|V|5|P|7|2N|8|@]|9|@]|C|$Q|R]]|$1|W|3|X|5|6|7|2O|8|@$A|2P|B|2Q|F|G]]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|2R|8|@$A|2S|B|2T|F|G]|$A|2U|B|2V|F|G]]|9|@]|C|$]]|$1|10|3|11|5|6|7|2W|8|@]|9|@]|C|$]]|$1|12|3|13|5|6|7|2X|8|@]|9|@]|C|$]]|$1|14|3|15|5|6|7|2Y|8|@]|9|@]|C|$]]|$1|16|3|17|5|P|7|2Z|8|@]|9|@]|C|$Q|R]]|$1|18|3|19|5|6|7|30|8|@]|9|@]|C|$]]|$1|1A|3|1B|5|P|7|31|8|@]|9|@]|C|$Q|R]]|$1|1C|3|1D|5|6|7|32|8|@$A|33|B|34|F|G]]|9|@]|C|$]]|$1|1E|3|1F|5|6|7|35|8|@]|9|@]|C|$]]|$1|1G|3|1H|5|6|7|36|8|@$A|37|B|38|F|G]|$A|39|B|3A|F|G]]|9|@]|C|$]]|$1|1I|3|1J|5|6|7|3B|8|@]|9|@]|C|$]]|$1|1K|3|1L|5|6|7|3C|8|@]|9|@$A|3D|B|3E|1|3F]]|C|$]]|$1|1M|3|1N|5|6|7|3G|8|@$A|3H|B|3I|F|G]]|9|@$A|3J|B|3K|1|3L]]|C|$]]|$1|1O|3|-4|5|6|7|3M|8|@]|9|@]|C|$]]]|1P|$1Q|$5|1R|1S|1T|C|$1U|1V]]|1W|$5|1R|1S|1T|C|$1U|1X]]|1Y|$5|1R|1S|1T|C|$1U|1Z]]|20|$5|1R|1S|1T|C|$1U|21]]]]

<p>Just before I go into detail about how you can access the state of a child component, please make sure to read <a href="https://stackoverflow.com/a/27875018/4721085">Markus-ipse</a>'s answer regarding a better solution to handle this particular scenario.</p>
<p>If you do indeed wish to access the state of a component's children, you can assign a property called <code>ref</code> to each child. There are now two ways to implement references: Using <code>React.createRef()</code> and callback refs.</p>
<h1>Using <code>React.createRef()</code></h1>
<p>This is currently the recommended way to use references as of React 16.3 (See <a href="https://reactjs.org/docs/refs-and-the-dom.html#creating-refs" rel="noreferrer">the documentation</a> for more information). If you're using an earlier version then see below regarding callback references.</p>
<p>You'll need to create a new reference in the constructor of your parent component and then assign it to a child via the <code>ref</code> attribute.</p>
<pre><code>class FormEditor extends React.Component {
  constructor(props) {
    super(props);
    this.FieldEditor1 = React.createRef();
  }
  render() {
    return &lt;FieldEditor ref={this.FieldEditor1} /&gt;;
  }
}
</code></pre>
<p>In order to access this kind of ref, you'll need to use:</p>
<pre><code>const currentFieldEditor1 = this.FieldEditor1.current;
</code></pre>
<p>This will return an instance of the mounted component so you can then use <code>currentFieldEditor1.state</code> to access the state.</p>
<p>Just a quick note to say that if you use these references on a DOM node instead of a component (e.g. <code>&lt;div ref={this.divRef} /&gt;</code>) then <code>this.divRef.current</code> will return the underlying DOM element instead of a component instance.</p>
<h1>Callback Refs</h1>
<p>This property takes a callback function that is passed a reference to the attached component. This callback is executed immediately after the component is mounted or unmounted.</p>
<p>For example:</p>
<pre><code>&lt;FieldEditor
    ref={(fieldEditor1) =&gt; {this.fieldEditor1 = fieldEditor1;}
    {...props}
/&gt;
</code></pre>
<p>In these examples the reference is stored on the parent component. To call this component in your code, you can use:</p>
<pre><code>this.fieldEditor1
</code></pre>
<p>and then use <code>this.fieldEditor1.state</code> to get the state.</p>
<p>One thing to note, make sure your child component has rendered before you try to access it ^_^</p>
<p>As above, if you use these references on a DOM node instead of a component (e.g. <code>&lt;div ref={(divRef) =&gt; {this.myDiv = divRef;}} /&gt;</code>) then <code>this.divRef</code> will return the underlying DOM element instead of a component instance.</p>
<h1>Further Information</h1>
<p>If you want to read more about React's ref property, check out <a href="https://facebook.github.io/react/docs/refs-and-the-dom.html" rel="noreferrer" title="Refs and the DOM">this page</a> from Facebook.</p>
<p>Make sure you read the &quot;<a href="https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs" rel="noreferrer" title="Don't Overuse Refs">Don't Overuse Refs</a>&quot; section that says that you shouldn't use the child's <code>state</code> to &quot;make things happen&quot;.</p>


blocks|key|37044|text|您可以通过向子组件传递回调来访问子状态。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|37045|const+Parent+=+()+=>+{
++return+(
++++<Child+onSubmit={(arg)+=>+{+
+++++++++++++console.log('accessing+child+state+from+parent+callback:+',+arg)+
+++++++++++}}+
++++/>+
++)
}

const+Child+=+({onSubmit})+=>+{
++++const+[text,+setText]+=+useState('');

++++return+(
++++++<>
++++++++<input+value={text}+onChange={setText}>
++++++++<button+onClick={()+=>+onSubmit(search)}+/>
++++++</>
++++)
}|code-block|syntax|javascript|37046|现在，如果单击子组件中的按钮，您将执行从父组件传递的函数，并可以访问子组件的状态变量。|37047|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You may access the child state by passing a callback to the child component.</p>
<pre><code>const Parent = () =&gt; {
  return (
    &lt;Child onSubmit={(arg) =&gt; { 
             console.log('accessing child state from parent callback: ', arg) 
           }} 
    /&gt; 
  )
}

const Child = ({onSubmit}) =&gt; {
    const [text, setText] = useState('');

    return (
      &lt;&gt;
        &lt;input value={text} onChange={setText}&gt;
        &lt;button onClick={() =&gt; onSubmit(search)} /&gt;
      &lt;/&gt;
    )
}
</code></pre>
<p>Now if you click the button in the child component, you will execute the function passed from the parent and have access to the child component's state variables.</p>


<p>I have the following structure:</p>
<p><code>FormEditor</code> - holds multiple instances of FieldEditor
<code>FieldEditor</code> - edits a field of the form and saving various values about it in its state</p>
<p>When a button is clicked within FormEditor, I want to be able to collect information about the fields from all <code>FieldEditor</code> components, information that's in their state, and have it all within FormEditor.</p>
<p>I considered storing the information about the fields outside of <code>FieldEditor</code>'s state and put it in <code>FormEditor</code>'s state instead. However, that would require <code>FormEditor</code> to listen to each of its <code>FieldEditor</code> components as they change and store their information in its state.</p>
<p>Can't I just access the children's state instead? Is it ideal?</p>


How to access a child's state in React

JSON

我有以下结构：FormEditor -保存FieldEditor FieldEditor的多个实例-编辑表单的字段，并在其状态下保存有关该字段的各种值当在FormEditor中单击一个按钮时，我希望能够从所有FieldEditor组件收集有关字段的信息、处于其状态的信息，并将其全部放在FormEditor中。我考虑将关...

问如何在React中访问子对象的状态
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React中访问子对象的状态EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React中访问子对象的状态
EN