内部按钮onClick事件未使用React触发

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再次渲染...

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

这是演示和代码

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％，因为我在编写时没有任何反馈，但是我认为它的方向正确。

Answer 2

它的javascript .. so ..

onToggleTodo = t => (e) => {    
      this.setState({done: true});
}

onRemove = t => (e) => {    
      e.stopPropagation();
      console.log(e.target);
}