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

这不是最好的方式，RIGHT ?????

以下是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％，因为我写的没有任何反馈，但我认为它朝着正确的方向前进。

Answer 2

它的javascript ..所以..

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

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

内部按钮onClick事件未被React

2 个答案: