2

孩子：

class Plus extends React.Component{
  constructor(props){
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(){
    console.log('It's Working!')
    this.props.handleButtonChange()
  }

  render(){
    return (
      <div>
        <i
          className="fa fa-plus fa-2x"
          onClick={() => this.handleClick()}
        ></i>
      </div>
    );
  }
}

export default Plus;

家长：

class NoteCreation extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="note-creation">
        <form action="">
          <Plus handleButtonChange={this.props.handleButtonChange} />
        </form>
      </div>
    );
  }
}

export default NoteCreation;

祖父组件：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      buttonStat : false
    };
    this.handleButtonChange = this.handleButtonChange(this);

  }

  handleButtonChange(){
    this.setState({
      buttonStat : true
    })
  }


  render() {

    return (
      <div className="App">
        <NoteCreation
          handleButtonChange={this.handleButtonChange}
        />
      </div>
    );
  }
}

export default App;

我只是想将方法 handleButtonChange() 从 grandParent 一直传递给子项（这是一个按钮），当按钮被单击时，它会触发 click 事件，该事件会触发此函数，从而更改祖父组件（即设置按钮状态）我在哪里错了，或者这种方法完全错误，我真的很陌生。我只想通过子点击事件在 grandParent 中设置状态。我不断收到此错误TypeError: this.props.handleButtonChange is not a function 将不胜感激任何帮助

4

2 回答 2

1

您的顶部组件中有错字

它应该是

this.handleButtonChange = this.handleButtonChange.bind(this);

并不是

this.handleButtonChange = this.handleButtonChange(this);

或者，您可以像这样声明您的方法

  handleButtonChange = () => {
    this.setState({
      buttonStat : true
    })
  }

根本不使用bind。

于 2021-07-06T12:44:41.393 回答
0

在 grandParent 组件中，您应该通过关键字 bind 将其绑定到当前组件，以通过 props 传递它。this.handleButtonChange = this.handleButtonChange.bind(this);

于 2021-07-06T12:47:36.567 回答