按钮中的e.target.value有时返回未定义的内容。为什么会发生这种事？

Question

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

方法

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

呈现()

 render() {
    return (
        <div className='audit-menu' style={{backgroundColor: '#fff'}}>
            <div className='row align-items-center'>
                <div className="col text-left ml-2 font-weight-bold">
                    Invoice audit
                </div>
                <div className="col-6 ">
                    <div class="btn-group btn-group w-100">
                        <button class="w-25 btn menu-btn" value='inbox' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-upload pr-3">
                        </i>Inbox
                        </button>
                        <button class="w-25 btn menu-btn" value='rejected'  onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3">
                        </i>Rejected
                        </button>
                        <button class="w-25 btn menu-btn" value='accepted' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3">
                        </i>Accepted
                        </button>
                        <button class="w-25 btn menu-btn" value='archive' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3">
                        </i>Archive
                        </button>
                    </div>
                    ​
                </div>
                <div className="col">
                    <li className="nav-item dropdown d-none d-lg-block">
                        <a aria-expanded="true" className="nav-link dropdown-toggle select-company-dropdown"
                           data-toggle="dropdown" href="#" id="selectLanguage">Select company</a>
                    </li>
                </div>
            </div>
        </div>
    );
}

当单击按钮时，大多数情况下，e.target.value都是由上述函数获取的。但有时它返回未定义的。为什么会发生这种事？下面添加了Console.log输出。

​

Answer 1

试着

this.changeFilterForButtons

而不是

this.changeFilterForButtons.bind(this)

或在构造函数中：

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

您可以查看本文中有关绑定的更多信息，如下

这就是为什么我们需要绑定事件。

Answer 2

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

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

当我意外地单击图标时，它将返回未定义的值，因为它没有任何要返回的值。

Answer 3

我也遇到了同样的麻烦。当我读到第二条评论时，我看到了在哪里找到解决方案。

CSS解决方案：

button > * {
  pointer-events: none;
}

来源