反应本机通过父级方法到子组件

Question

我正在尝试将方法从父组件传递到子组件。我认为我的代码是正确的，但仍然显示错误 undefined不是对象（评估'_this2.props.updatedata'）。我不知道这是什么问题，因为我经常搜索互联网，每个人都这样的道具将其传递给孩子。请告诉我我想念什么

父母：

class Parent extends React.Component {
  updateData = (data) => {
    console.log(`This data isn't parent data. It's ${data}.`)
    // data should be 'child data' when the
    // Test button in the child component is clicked
  }
  render() {
    return (
      <Child updateData={val => this.updateData(val)} />
    );
  }

儿童：

class Child extends React.Component {
  const passedData = 'child data'
  handleClick = () => {
    this.props.updateData(passedData);
  }
  render() {
    return (
      <button onClick={this.handleClick()}>Test</button>
    );
  }
}

Answer 1

`class Child extends React.Component {    
    handleClick = () => {
        const passedData = 'child data'
        this.props.updateData(passedData);
    }
    render() {
        return (
            <button onClick={this.handleClick}>Test</button>
        );
    }
}`

Answer 2

class Parent extends React.Component { 
updateData = (data) => {
  console.log(`This data isn't parent data. It's ${data}.`)
}
render() {
  return (
    <Child updateData={this.updateData} />
  );
}
}

和儿童组件：`

class Child extends React.Component {
  const passedData = 'child data'
  handleClick = () => {
    this.props.updateData(passedData);
  }
  render() {
    return (
      <button onClick={this.handleClick}>Test</button>
    );
  }
}

`

Answer 3

您需要直接传递该功能，而不是作为回调

class Parent extends React.Component {
  updateData = (data) => {
    console.log(`This data isn't parent data. It's ${data}.`)
    // data should be 'child data' when the
    // Test button in the child component is clicked
  }
  render() {
    return (
      <Child updateData={this.updateData} />
    );
  }

Answer 4

我认为您需要通过这样的函数。查看此解决方案。