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

Question

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

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

现在的问题是如何在子 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 函数中，我需要设置状态，但我做不到。请提供任何解决方案

Answer 1

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() 方法绑定到 class 的范围，即）。 'this'。我已经添加了一个示例代码..请检查

Answer 2

问题似乎是当在 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 
  }

在

上查看此答案

检查工作片段

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"/>

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

How to setState in child component when child function called from parent component in ReactJS

components

function

setstate

reactjs