ReactJS中从父组件调用子函数时如何在子组件中设置状态

Posted 2023-02-23

【中文标题】ReactJS中从父组件调用子函数时如何在子组件中设置状态

【英文标题】：How to setState in child component when child function called from parent component in ReactJS

【发布时间】：2018-04-29 15:55:54

【问题描述】：

我想从父组件调用子函数所以我在这里发现了一个问题

Call child method from parent

所以我用这种方式来称呼它（来自第一个答案和第二个方法）。

现在的问题是如何在子 getAlert 函数中设置状态

class Parent extends Component 
  render() 
    return (
      <div>
        <Child ref=instance =>  this.child = instance;  />
        <button onClick=() =>  this.child.getAlert(); >Click</button>
      </div>
    );
  


class Child extends Component 
  constructor()
     super();
     this.state = message:"";
  

  getAlert() 
    alert('clicked');
    //HERE I NEED TO SETSTATE 
  

  render() 
    return (
      this.state.message!=""?(
         <h1>this.state.message</h1>

      ):(

      <h1>Hello</h1>

      )
    );
  

在 child 的 getAlert 函数中，我需要 setState 但我做不到。请提供任何解决方案

【问题讨论】：

父或子本身的setState

我认为问题在于绑定。绑定函数getAlert

能贴一下代码sn-p怎么解决

【参考方案1】：

问题似乎是在 child 的 getAlert 函数中调用 setState 时，this.setState 将未定义。发生这种情况是因为 getAlert 函数中的 this 没有引用 React 组件的上下文，并且为组件定义了 setState。您可以通过绑定getAlert 函数来解决这个问题。

你可以通过两种方式做到这一点。

首先：在构造函数中使用.bind(this)

class Child extends Component 

  constructor() 
     super();
     this.getAlert = this.getAlert.bind(this);
  
  getAlert() 
    alert('clicked');
    //HERE I NEED TO SETSTATE 
  

  render() 
    return (
      <h1>Hello</h1>
    );
  

第二：使用箭头功能

getAlert = ()  => 
    alert('clicked');
    //HERE I NEED TO SETSTATE 
  

在 Why do we need to bind React functions

上查看此答案

检查工作的sn-p

class Parent extends React.Component 
  render() 
    return (
      <div>
        <Child ref=instance =>  this.child = instance;  />
        <button onClick=() =>  this.child.getAlert(); >Click</button>
      </div>
    );
  


class Child extends React.Component 
  constructor()
     super();
     this.state = message:"";
  

  getAlert = () => 
    alert('clicked');
    this.setState(message: "somemessage");
  

  render() 
    return (
      <div>this.state.message!=""?(
         <h1>this.state.message</h1>

      ):(

      <h1>Hello</h1>

      )</div>
    );
  


ReactDOM.render(<Parent/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>

【讨论】：

你遇到什么错误，你能详细说明你的问题

没有错误，我只是按照你写的做了。我把这些行放在 getAlert 函数 this.setState(message:"Yahoo");控制台.log(this.state.message);所以 console.log 总是打印空白

在这种情况下你需要看到这个***.com/questions/41278385/…

console.log 不是我关心的问题。我担心的是状态更新，如果状态没有更新，则子组件的渲染不起作用。请查看已编辑的问题，然后您将了解状态使用

谢谢，我的代码中可能还有其他问题需要重新查看。

【参考方案2】：

class Parent extends React.Component 
  render() 
    return (
      <div>
        <Child ref=instance =>  this.child = instance;  />
        <button onClick=() =>  this.child.getAlert(); >Click</button>
      </div>
    );
  


class Child extends React.Component 
  constructor()
  super()
  this.state = 
    message: 'google'
  
  this.getAlert = this.getAlert.bind(this)
  
    
  getAlert() 
    alert('clicked');
    this.setState (
      message: 'yahoo'
    , () => 
      console.log(this.state.message) //the state value will be printed
    ); 
  

  render() 
  console.log(this.state.message)
    return (
      <h1>Hello this.state.message</h1>
    );
  


ReactDOM.render(
  <Parent />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

您已将 getAlert() 方法绑定到类的范围，即）。 '这'。我添加了一个示例代码..请检查

【讨论】：

没有错误，我只是按照你写的做了。我将这些行放在 getAlert 函数 this.setState(message:"Yahoo");控制台.log(this.state.message);所以 console.log 总是打印空白

尝试在 setState 函数的回调中或在 render() 方法中使用 console.log()。因为 setState 的行为是异步的，所以如果你立即记录它，新状态将不可用

console.log 不是我关心的问题。我担心的是状态更新，如果状态没有更新，则子组件的渲染不起作用。请查看已编辑的问题，然后您将了解状态使用

我已经添加了一个相同的工作小提琴..请检查