React：無狀態組件觸發OnClick

Question

我有以下目錄結構：

Todo - > TodoList - > TodoItem

我將todos，onSelection，ontletion函數從todo傳遞到列表，依此類推到項目。

列表和項目組件都是無狀態的，問題是，當我單擊該項時，由於冒泡，它也會觸發onClick()以及onSelect()方法，我不想在任何情況下使用event.stopProppogation 。

我還嘗試了無狀態組件中的方法，但是在加載組件時它會激活。

的TodoItem：

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}
        />

Answer 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

Answer 2

將通函傳遞給組件時，請確保沒有 調用該函數

你正在給一個函數直接調用，同時將它作為一個全部傳遞。 以下是解決方案之一，將回調作為“返回調用的函數”傳遞。

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