Question

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

方法

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

Render（）

 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>
    );
}

大多数情况下，当单击按钮时，上述功能就会获取 target.value 。但有时会返回 undefined 。为什么会这样？ 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>

当我不小心单击该图标时，它将返回undefined，因为它没有任何要返回的值。

Answer 2

尝试

this.changeFilterForButtons

代替

this.changeFilterForButtons.bind(this)

或在构造函数中：

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

您可以在本文中查找有关绑定的更多信息，此

This is why we need to bind event

Answer 3

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

CSS解决方案：

button > * {
  pointer-events: none;
}

Source

按钮中的e.target.value有时返回未定义。为什么会这样？

3 个答案: