javascript - 按钮中的 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

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

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

When i accidentally click the icon, it will return undefined because it doesn't have any value to return.