javascript - React 未触发内部按钮 onClick 事件

Question

嗨，我在 React 应用程序中有这样的东西:

<li onClick={this.props.onToggleTodo}>
    Todo
    <button  onClick={this.props.onRemove}>Remove</button>
<li>

但是当我单击删除按钮时...处理程序 onToggleTodo 被触发，但 onRemove 没有。

我通过在处理程序上执行此操作来修复:

onToggleTodo = t => (e) => {
    if(e.target.tagName == 'LI'){
        this.setState({done: true});
    }
}

它没有因为setState而触发，因为它使React再次渲染...

这不是最好的方法，对吗？？？？

这是demo和 code

Answer 1

这可能是因为 onToggleTodo 位于 li 上，而 li 是按钮的容器...您可能需要尝试按以下方式工作:

<li>
    <span onClick={this.props.onToggleTodo}>Todo</span>
    <button onClick={this.props.onRemove}>Remove</button>
<li>

编辑

如果您真的想要按照最初的方式工作，我认为这也应该有效:

<li {todoToggled ? onClick={this.props.onToggleTodo}}>
    Todo
    <button  onClick={this.props.onRemove}>Remove</button>
<li>

onToggleTodo = () => {
  this.setState({
    todoToggled = true
  })
  //Rest of your code
}

onRemove = () => {
  this.setState({
    todoToggled = false
  })
  //Rest of your code
}

我不能保证这里的语法是否 100% 正确，因为我在没有任何反馈的情况下编写了这篇文章，但我认为它正朝着正确的方向发展。