內部按鈕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);
}