按钮中的 e.target.value 有时会返回 undefined。为什么会发生这种情况？答案

【问题标题】：e.target.value in button returns undefined sometimes. Why this happens?按钮中的 e.target.value 有时会返回 undefined。为什么会发生这种情况？
【发布时间】：2019-02-06 03:15:14
【问题描述】：

我已经定义了四个按钮，这些按钮将在 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 被上述函数占用。但有时它会返回 undefined。为什么会这样？ Console.log 输出添加在下面。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

当我不小心点击图标时，它会返回 undefined 因为它没有任何值要返回。

【讨论】：

【解决方案2】：

试试

this.changeFilterForButtons

而不是

this.changeFilterForButtons.bind(this)

或在构造函数中：

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

你可以看这篇文章来了解更多关于bind的信息，这个

This is why we need to bind event

【讨论】：

你的回答很有用。我根据您的更改更改了代码。但我仍然遇到同样的错误。这只是有时而不是每次都发生。是否可以将所有按钮调用到一个方法中？。
我尝试不使用 this.props.handleData(filter);和 this.props.filterData(); .它一直都在工作
你的答案是正确的。我的错误在于它的图标，当我单击它返回未定义的图标时。
很高兴听到它对您有帮助，请接受答案。谢谢

【解决方案3】：

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

CSS 解决方案：

button > * {
  pointer-events: none;
}

Source

【讨论】：