React：无状态组件同时触发 OnClick答案

【问题标题】：React: Stateless component triggers both OnClickReact：无状态组件同时触发 OnClick
【发布时间】：2018-10-22 11:20:23
【问题描述】：

我的目录结构如下：

Todo -> TodoList -> TodoItem

我将 todos、onSelection、onDeletion 函数从 todo 传递给列表等等。

列表和项目组件都是无状态的，问题是，当我单击项目时，由于冒泡，它也会触发 onClick() 和 onSelect() 方法，我不想使用 event.stopProppogation无论如何。

我也尝试过以下无状态组件中的方法，但是在加载组件时它会启动。

待办事项：

const TodoItem = ({text, onSelection, onDeletion, id}) => {

  const wrapDeletion = (id) => {
    onDeletion(id);
  }
  return (
    <li className="list-group-item" onClick={onSelection.bind(this, id)}>
      {text}
      <button className="btn btn-danger float-right" onClick={wrapDeletion(id)}>
        {BTN_ACTIONS.DELETE}
      </button>
    </li>
  );
}

待办事项列表：

  <ul className="list-group">
      {todos.map(todo =>
        <TodoItem
          key={todo.id}
          id={todo.id}
          onSelection={onSelection}
          text={todo.text}
          onDeletion={onDeletion}/>)
      }
    </ul>

待办事项：

 <TodoList
          todos={this.state.todos}
          onSelection={onSelection}
          onDeletion={onDeletion}
        />

【问题讨论】：

问题是在item中，当我点击onClick时，由于冒泡，它也会触发onSelect方法，请解释上面的行

标签： javascript reactjs

【解决方案1】：

您应该拦截点击事件并阻止它传播。为此，请包装一个 div 并将其应用到 stopPropagation 中

const TodoItem = ({text, onSelection, onDeletion, id}) => {

  const wrapDeletion = (id) => {
    onDeletion(id);
  }
  return (
    <li className="list-group-item" onClick={onSelection.bind(this, id)}>
      {text}
      <div className="clickinterceptor" onClick={(e) => {
         e.stopPropagation();
         e.preventDefault();
       }}>
      <button className="btn btn-danger float-right" onClick={wrapDeletion(id)}>
        {BTN_ACTIONS.DELETE}
      </button>
    </div>
    </li>
  );
}

这方面的文档在这里https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

【讨论】：

主要问题是没有 stopPropgation 的事情，没有它的方法？
我没有其他方法可以区分来自不同元素的点击。读得不够好，您明确表示没有 stopPropagation()，对不起老兄

【解决方案2】：

确保在将 函数传递给组件

你正在给一个函数一个 STRAIGHT CALL，同时把它作为一个 all back。以下是解决方案之一，将回调作为“返回调用的函数”传递。

const TodoItem = ({text, onSelection, onDeletion, id}) => {

  const wrapDeletion = (id) => {
    onDeletion(id);
  }
  return (
    <li className="list-group-item" onClick={onSelection.bind(this, id)}>
      {text}
      <button className="btn btn-danger float-right" onClick={() => wrapDeletion(id)}>
        {BTN_ACTIONS.DELETE}
      </button>
    </li>
  );
}

您可以在此处进一步阅读！

https://reactjs.org/docs/faq-functions.html#how-do-i-pass-a-parameter-to-an-event-handler-or-callback

【讨论】：

问题的主要部分是停止事件冒泡，如果我这样做不使用event.StopPropogation()，冒泡将持续存在。