Javascript e、 按钮中的target.value有时返回未定义的值。为什么会发生这种情况？

我已经定义了四个按钮，这些按钮将在onClick事件中调用相同的方法

方法

   changeFilterForButtons(e){
    let filter = e.target.value;
    console.log("----------------------------"  + filter);
    this.props.handleData(filter);
    this.props.filterData();
}

Render（）

render（）{
返回(
发票审核
收件箱
拒绝
认可的
档案文件
​


);
}

大多数时候点击按钮时，上述函数获取e.target.value。但有时它返回未定义的。为什么会这样？。下面添加了Console.log输出

尝试使用

this.changeFilterForButtons

而不是

this.changeFilterForButtons.bind(this)

或在构造函数中：

constructor( props ){
    super( props );
    this.changeFilterForButtons = this.changeFilterForButtons.bind(this);
}

您可以通过本文了解有关bind的更多信息，如下所示：

---

首先，我必须说下面两个答案都是正确的。我的错误是因为它的图标

<button class="w-25 btn menu-btn" value='archive' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3"</i>Archive</button>

---

我也有同样的问题。当我读到第二条评论时，我看到了在哪里可以找到解决方案

CSS解决方案：

button > * {
  pointer-events: none;
}

你的答案非常有用。我根据您的更改更改了代码。但我还是犯了同样的错误。这只是有时发生，不是每次都发生。可以将所有按钮都调用到一个方法中吗？我尝试不使用这个方法。props.handleData（filter）；还有这个.props.filterData（）。你的答案是正确的，它一直在工作。我的错误是它的图标，当我点击图标时，它返回未定义的。很高兴听到它对你有帮助，请接受答案。非常感谢。
button > * {
  pointer-events: none;
}