如何在 React js 中单击按钮时调用函数？答案

【问题标题】：How to call a function on button click in react js?如何在 React js 中单击按钮时调用函数？
【发布时间】：2021-09-08 15:06:06
【问题描述】：

点击按钮时我需要调用一个函数。我的代码是：

    createButtonsArray(arr){
         return arr.arr.map((key,index) =>
         <input type='button' onClick={this.sayHello}/>
    )}

    sayHello() {
        alert('Hello!');
    }

现在，我收到一个错误：

Unhandled Rejection (TypeError): Cannot read property 'sayHello' of undefined

会是什么？

【问题讨论】：

这是一个绑定问题，您需要将sayHello 和createButtonsArray 设为具有箭头函数值的属性。或者您可以在构造函数中调用this.sayHello = this.sayHello.bind(this)（createButtonsArray 相同）。
这是在功能组件中吗？ this 在功能组件中未定义。否则，您需要将this 绑定到基于类的组件中的sayHello 函数，或者在构造函数中，或者通过将其转换为箭头函数。

标签： reactjs button onclick

【解决方案1】：

试试这个

class Comp {
  constructor() {
    this.sayHello = this.sayHello.bind(this);
    this.createButtonsArray = this.createButtonsArray.bind(this);
  }

  sayHello() {
    alert("Hello!");
  }
  createButtonsArray(arr) {
    return arr.arr.map((key, index) => (
      <input type="button" onClick={this.sayHello} />
    ));
  }
}

或

如果你想绑定这个

class Comp {
  sayHello = () => {
    alert("Hello!");
  }

  createButtonsArray = (arr) => {
    return arr.arr.map((key, index) => (
      <input type="button" onClick={this.sayHello} />
    ));
  }
}

【讨论】：

谢谢你，我按照你的第一个建议做了，它奏效了！现在我需要“写入”键的每个按钮值，我该怎么做？
<button onClick={() => this.sayHello(key, index)}> {key}</button> 这样使用
最后我使用了 value={key}，但非常感谢。