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函数中我需要setState但我无法做到。请提供任何解决方案

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

您已将getAlert（）方法绑定到类的范围，即）。＆＃39;这＆＃39 ;.我添加了一个示例代码..pls check

Answer 2

问题似乎是当在子进程的getAlert函数内调用[Wed Nov 15 20:09:42.122140 2017] [:error] [pid 7776] [client 10.1.2.66:41696] PHP Parse error: syntax error, unexpected end of file, expecting elseif (T_ELSEIF) or else (T_ELSE) or endif (T_ENDIF) in /var/lib/wordpress/wp-content/themes/wpTheme2/single_iframe.php on line 234时，setState将是未定义的。发生这种情况是因为getAlert函数中的this.setState未引用React Component的上下文，并且为Component定义了setState。您可以通过绑定this函数来解决此问题。

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

首先：在构造函数中使用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>
    );
  }
}

在 Why do we need to bind React functions

上查看此答案

检查工作代码段

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'))

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

2 个答案: