blocks|key|2657616|text|状态应该在父组件中进行管理。您可以通过添加特性将open值传递给子组件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2657617|class+ParentComponent+extends+Component+{
+++constructor(props)+{
++++++super(props);
++++++this.state+=+{
++++++++open:+false
++++++};

++++++this.toggleChildMenu+=+this.toggleChildMenu.bind(this);
+++}

+++toggleChildMenu()+{
++++++this.setState(state+=>+({
++++++++open:+!state.open
++++++}));
+++}

+++render()+{
++++++return+(
+++++++++<div>
+++++++++++<button+onClick={this.toggleChildMenu}>
++++++++++++++Toggle+Menu+from+Parent
+++++++++++</button>
+++++++++++<ChildComponent+open={this.state.open}+/>
+++++++++</div>
+++++++);
++++}
}

class+ChildComponent+extends+Component+{
++++render()+{
++++++return+(
+++++++++<Drawer+open={this.props.open}/>
++++++);
++++}
}|code-block|syntax|javascript|2657618|entityMap^0|O|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>The state should be managed in the parent component. You can transfer the <code>open</code> value to the child component by adding a property.</p>

<pre><code>class ParentComponent extends Component {
   constructor(props) {
      super(props);
      this.state = {
        open: false
      };

      this.toggleChildMenu = this.toggleChildMenu.bind(this);
   }

   toggleChildMenu() {
      this.setState(state =&gt; ({
        open: !state.open
      }));
   }

   render() {
      return (
         &lt;div&gt;
           &lt;button onClick={this.toggleChildMenu}&gt;
              Toggle Menu from Parent
           &lt;/button&gt;
           &lt;ChildComponent open={this.state.open} /&gt;
         &lt;/div&gt;
       );
    }
}

class ChildComponent extends Component {
    render() {
      return (
         &lt;Drawer open={this.props.open}/&gt;
      );
    }
}
</code></pre>


blocks|key|113418|text|上面的答案对我来说是部分正确的，但在我的场景中，我希望将值设置为一个状态，因为我已经使用该值来显示/切换模式。所以我用了下面这样的方法。希望它能帮助到一些人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113419|class+Child+extends+React.Component+{
++state+=+{
++++visible:false
++};

++handleCancel+=+(e)+=>+{
++++++e.preventDefault();
++++++this.setState({+visible:+false+});
++};

++componentDidMount()+{
++++this.props.onRef(this)
++}

++componentWillUnmount()+{
++++this.props.onRef(undefined)
++}

++method()+{
++++this.setState({+visible:+true+});
++}

++render()+{
++++return+(<Modal+title="My+title?"+visible={this.state.visible}+onCancel={this.handleCancel}>
++++++{"Content"}
++++</Modal>)
++}
}

class+Parent+extends+React.Component+{
++onClick+=+()+=>+{
++++this.child.method()+//+do+stuff
++}
++render()+{
++++return+(
++++++<div>
++++++++<Child+onRef={ref+=>+(this.child+=+ref)}+/>
++++++++<button+onClick={this.onClick}>Child.method()</button>
++++++</div>
++++);
++}
}|code-block|syntax|javascript|113420|参考-+https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542|offset|length|113421|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542^0|0|0|4|27|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Above answer is partially correct for me, but In my scenario, I want to set the value to a state, because I have used the value to show/toggle a modal. So I have used like below. Hope it will help someone.</p>

<pre><code>class Child extends React.Component {
  state = {
    visible:false
  };

  handleCancel = (e) =&gt; {
      e.preventDefault();
      this.setState({ visible: false });
  };

  componentDidMount() {
    this.props.onRef(this)
  }

  componentWillUnmount() {
    this.props.onRef(undefined)
  }

  method() {
    this.setState({ visible: true });
  }

  render() {
    return (&lt;Modal title="My title?" visible={this.state.visible} onCancel={this.handleCancel}&gt;
      {"Content"}
    &lt;/Modal&gt;)
  }
}

class Parent extends React.Component {
  onClick = () =&gt; {
    this.child.method() // do stuff
  }
  render() {
    return (
      &lt;div&gt;
        &lt;Child onRef={ref =&gt; (this.child = ref)} /&gt;
        &lt;button onClick={this.onClick}&gt;Child.method()&lt;/button&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>Reference - <a href="https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542" rel="noreferrer">https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542</a></p>


blocks|key|111097|text|父组件可以管理子状态，将属性传递给子组件，子组件使用componentWillReceiveProps将该属性转换为状态。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|111098|class+ParentComponent+extends+Component+{
++state+=+{+drawerOpen:+false+}
++toggleChildMenu+=+()+=>+{
++++this.setState({+drawerOpen:+!this.state.drawerOpen+})
++}
++render()+{
++++return+(
++++++<div>
++++++++<button+onClick={this.toggleChildMenu}>Toggle+Menu+from+Parent</button>
++++++++<ChildComponent+drawerOpen={this.state.drawerOpen}+/>
++++++</div>
++++)
++}
}

class+ChildComponent+extends+Component+{
++constructor(props)+{
++++super(props)
++++this.state+=+{
++++++open:+false
++++}
++}

++componentWillReceiveProps(props)+{
++++this.setState({+open:+props.drawerOpen+})
++}

++toggleMenu()+{
++++this.setState({
++++++open:+!this.state.open
++++})
++}

++render()+{
++++return+<Drawer+open={this.state.open}+/>
++}
}|code-block|syntax|javascript|111099|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The parent component can manage child state passing a prop to child and the child convert this prop in state using componentWillReceiveProps.</p>

<pre><code>class ParentComponent extends Component {
  state = { drawerOpen: false }
  toggleChildMenu = () =&gt; {
    this.setState({ drawerOpen: !this.state.drawerOpen })
  }
  render() {
    return (
      &lt;div&gt;
        &lt;button onClick={this.toggleChildMenu}&gt;Toggle Menu from Parent&lt;/button&gt;
        &lt;ChildComponent drawerOpen={this.state.drawerOpen} /&gt;
      &lt;/div&gt;
    )
  }
}

class ChildComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false
    }
  }

  componentWillReceiveProps(props) {
    this.setState({ open: props.drawerOpen })
  }

  toggleMenu() {
    this.setState({
      open: !this.state.open
    })
  }

  render() {
    return &lt;Drawer open={this.state.open} /&gt;
  }
}
</code></pre>


blocks|key|2657666|text|您可以从父组件发送道具并在子组件中使用它，因此您将使子组件的状态更改基于发送的道具更改，并且您可以通过在子组件中使用getDerivedStateFromProps来处理此问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2657667|entityMap^0|1M|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>You can send a prop from the parent and use it in child component so you will base child's state changes on the sent prop changes and you can handle this by using <strong>getDerivedStateFromProps</strong> in the child component. </p>


blocks|key|111109|text|您可以使用createRef从父零部件更改子零部件的状态。下面是所有的步骤。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|111110|使用React.createRef().|111111|Attach引用对子组件使用ref={}.|unordered-list-item|111112|
|111113|Call+this.yor-reference.current.method.|111114|
+|111115|创建一个方法来更改子组件中的状态以及父组件中的子组件的引用|ordered-list-item|111116|111117|父组件|BOLD|111118|class+ParentComponent+extends+Component+{
constructor()
{
this.changeChild=React.createRef()
}
++render()+{
++++return+(
++++++<div>
++++++++<button+onClick={this.changeChild.current.toggleMenu()}>
++++++++++Toggle+Menu+from+Parent
++++++++</button>
++++++++<ChildComponent+ref={this.changeChild}+/>
++++++</div>
++++);
++}
}|code-block|syntax|javascript|111119|子组件|111120|class+ChildComponent+extends+Component+{
++constructor(props)+{
++++super(props);
++++this.state+=+{
++++++open:+false;
++++}
++}

++toggleMenu=()+=>+{
++++this.setState({
++++++open:+!this.state.open
++++});
++}

++render()+{
++++return+(
++++++<Drawer+open={this.state.open}/>
++++);
++}
}|111121|entityMap^0|5|9|0|2|H|0|E|6|0|0|5|X|0|0|0|0|0|3|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1H|8|@]|D|@]|E|$]]|$1|M|3|N|5|J|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1L|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|1M|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1O|8|@$9|1P|A|1Q|B|W]]|D|@]|E|$]]|$1|X|3|Y|5|Z|7|1R|8|@]|D|@]|E|$10|11]]|$1|12|3|13|5|6|7|1S|8|@$9|1T|A|1U|B|W]]|D|@]|E|$]]|$1|14|3|15|5|Z|7|1V|8|@]|D|@]|E|$10|11]]|$1|16|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]]|17|$]]

<p>You can use the <code>createRef</code> to change the state of the child component from the parent component. Here are all the steps.</p>
<ol>
<li>Create a method to change the state in the child component.</li>
<li>Create a reference for the child component in parent component using <code>React.createRef()</code>.</li>
<li>Attach reference with the child component using <code>ref={}</code>.</li>
<li>Call the child component method using <code>this.yor-reference.current.method</code>.</li>
</ol>
<p><strong>Parent component</strong></p>
<pre><code>
class ParentComponent extends Component {
constructor()
{
this.changeChild=React.createRef()
}
  render() {
    return (
      &lt;div&gt;
        &lt;button onClick={this.changeChild.current.toggleMenu()}&gt;
          Toggle Menu from Parent
        &lt;/button&gt;
        &lt;ChildComponent ref={this.changeChild} /&gt;
      &lt;/div&gt;
    );
  }
}

</code></pre>
<p><strong>Child Component</strong></p>
<pre><code>
class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false;
    }
  }

  toggleMenu=() =&gt; {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      &lt;Drawer open={this.state.open}/&gt;
    );
  }
}



</code></pre>


blocks|key|2657720|text|如果您使用的是功能组件。您可以通过以下方式实现此目的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2657721|const+ParentComponent+=+()+=>+{
+++const+[isOpen,+setIsOpen]+=+useState(false)

+++toggleChildMenu()+{
++++++setIsOpen(prevValue+=>+!prevValue)
+++}

+++return+(
+++++<div>
+++++++<button+onClick={toggleChildMenu}>
+++++++++Toggle+Menu+from+Parent
+++++++</button>
+++++++<Child+open={isOpen}+/>
+++++</div>
+++);
}



const+Child+=+({open})+=>+{
++return+(
++++<Drawer+open={open}/>
++);
}|code-block|syntax|javascript|2657722|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you are using functional components. You can achieve this by:</p>
<pre><code>const ParentComponent = () =&gt; {
   const [isOpen, setIsOpen] = useState(false)

   toggleChildMenu() {
      setIsOpen(prevValue =&gt; !prevValue)
   }

   return (
     &lt;div&gt;
       &lt;button onClick={toggleChildMenu}&gt;
         Toggle Menu from Parent
       &lt;/button&gt;
       &lt;Child open={isOpen} /&gt;
     &lt;/div&gt;
   );
}



const Child = ({open}) =&gt; {
  return (
    &lt;Drawer open={open}/&gt;
  );
}
</code></pre>


<p>I have two components:
<strong>Parent Component</strong> from which I want to change child component's state:</p>

<pre><code>class ParentComponent extends Component {
  toggleChildMenu() {
    ?????????
  }
  render() {
    return (
      &lt;div&gt;
        &lt;button onClick={toggleChildMenu.bind(this)}&gt;
          Toggle Menu from Parent
        &lt;/button&gt;
        &lt;ChildComponent /&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>And <strong>Child Component</strong>:</p>

<pre><code>class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false;
    }
  }

  toggleMenu() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      &lt;Drawer open={this.state.open}/&gt;
    );
  }
}
</code></pre>

<p>I need to either change Child Component's <strong>open</strong> state from Parent Component, or call Child Component's <strong>toggleMenu()</strong> from Parent Component when Button in Parent Component is clicked?</p>


React js change child component's state from parent component

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有两个组件：父组件，我想通过它更改子组件的状态：class ParentComponent extends Component {  toggleChildMenu() {    ?????????  }  render() {    return (      <div>        <button onClic...

问React js从父组件更改子组件的状态
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React js从父组件更改子组件的状态EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React js从父组件更改子组件的状态
EN