通过 onClick 方法将值传递给父组件但其未定义

Question

我是 React 新手，如果这是一个简单/愚蠢的问题，我深表歉意。我正在尝试使用 React 创建一个简单的计算器应用程序，并且我正在尝试简单地打印我单击的按钮的值。我有一个可以渲染所有按钮的小键盘组件，但现在我只有一个。

const Keypad = () => {
    return (
        <div className="Keypad">
            <button name='1' onClick={e => this.onClick(e.name)}>1</button>
            
        </div>
    )
}

export default Keypad

在我的主应用程序文件中，我有一个 onClick 方法，它将检查按下的按钮的值并打印它，当我调用键盘组件时，我也会调用 onClick：

const onClick = (e) => {
    if (e.name === "1") {
      console.log(e.name)
    } else {
      console.log("nope")
    }
  };

return (
    <div className="Header">
      <header>
        <h1>Calculator</h1>
      </header>
      <Result />
      <Keypad onClick={onClick}/>
    </div>
  );

它编译成功，但是当我尝试单击按钮时，我收到“TypeError: Cannot read property 'onClick' of undefined”错误。我已经按照不同网站的一些步骤进行操作，但对为什么这不起作用感到困惑..

Answer 1

您使用了函数式组件，因此this 关键字是多余的。

const Keypad = ({onClick}) => {
    return (
        <div className="Keypad">
            <button name='1' onClick={onClick}>1</button>
            
        </div>
    )
}

export default Keypad

然后将e.name 传递给Keypad 组件中的onClick 函数。

const onClick = (e) => {
    if (e.target.name === "1") {
      console.log(e.target.name)
    } else {
      console.log("nope")
    }
  };

return (
    <div className="Header">
      <header>
        <h1>Calculator</h1>
      </header>
      <Result />
      <Keypad onClick={onClick}/>
    </div>
  );

Answer 2

Keypad 组件没有定义 this 也没有定义 onClick 回调，它是作为 prop 从父级传递的。

const Keypad = ({ onClick }) => {
  return (
    <div className="Keypad">
      <button name='1' onClick={onClick}>1</button>
    </div>
  )
}

事件e，应该是e.target.name。

const onClick = (e) => {
  if (e.target.name === "1") {
    console.log(e.target.name)
  } else {
    console.log("nope")
  }
};

return (
  <div className="Header">
    <header>
      <h1>Calculator</h1>
    </header>
    <Result />
    <Keypad onClick={onClick}/>
  </div>
);