Question

我具有以下目录结构：

Todo-> TodoList-> TodoItem

我将待办事项中的todos，onSelection，onDeletion函数传递给列表，依此类推。

列表和项目组件都是无状态的，问题在于，当我单击该项目时，它也会由于冒泡而触发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>
  );
}

Todo列表：

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

Todo：

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

Answer 1

您应拦截click事件并停止其传播。为此，请包装一个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

当您将其传递给功能时，请确保您没有调用组件

您要给函数一个STRAIGHT CALL，同时将其全部传递回去。以下是一种解决方案，将回调作为“函数返回调用”进行传递。

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

反应：无状态组件会触发两个OnClick

2 个答案: