onClick 和 event.target 不起作用反应

Question

我计划制作一个按钮，在点击时更新state。按钮内部有一个img 和div。当我点击按钮时onClick 触发，但当我点击img 或div 时不会触发。任何人都知道如何解决这个问题，因为我希望用户单击按钮上的任意位置（包括img 和div）。 我的 jsx 代码是：

<div
                className={
                  'flex flex-row flex-wrap justify-around border-2 rounded border-dashed'
                }>
                {categoryLeft.map((category) => (
                  <button
                    onClick={this.addCategory}
                    type='button'
                    value={category}
                    name={category}
                    className={
                      'flex bg-teal-600 my-2 mx-1 w-auto h-auto hover:bg-teal-400 text-white font-bold px-1 rounded'
                    }>
                    <div className={'self-center'} value={category}>
                      {category}
                    </div>
                    <img
                      className={'float-right ml-1 self-center w-5 h-5'}
                      value={category}
                      src={CloseImg}
                    />
                  </button>
                ))}
              </div>
            </div>

我的方法是：

 addCategory = (e) => {
    console.log(e.target);
    console.log(this.state.categoryLeft);
    this.setState({
      categoryUsed: [...this.state.categoryUsed, e.target.value],
      categoryLeft: this.state.categoryLeft.filter(
        (cat) => cat !== e.target.value
      ),
    });
  };

Answer 1

你可以试试e.currentTarget.value 而不是e.target.value。

来自 DOM 事件文档：

Event.currentTarget 标识事件的当前目标，因为事件遍历 DOM。它始终引用事件处理程序已附加到的元素，而不是 event.target 标识发生事件的元素。