內蒙古按鈕onClick事件不被解僱與反應

您好我有一個作出反應的應用是這樣的：內蒙古按鈕onClick事件不被解僱與反應

<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，因爲它使得陣營再次渲染...

，是不是最好的辦法，RIGHT ?????

這裏是demo和code

來源

2016-10-19 Lucas Katayama

這可能是因爲onToggleTodo是上慄和李是按鈕的容器......你可能想嘗試的工作如下：

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

編輯

如果你真的想工作你第一次在做的方式，我覺得這個建議立即進行刪除d工作也：

<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％，如果語法是正確的在這裏，因爲我在寫這沒有任何反饋，但我認爲這是正確的方向前進。

來源

2016-10-19 19:08:21 Kevin

我認爲，但...我想李面積可以點擊... 即使跨度採取一切可能的寬度它不會採取周圍的按鈕... –

確定你可以讓李的位置：親戚;跨度寬度：100％;身高100％;絕對位置，絕對按鈕位置，然後把它放在你想要的位置？ – Kevin

可能是迄今爲止最好的解決方案... 所以，如果我想要分開的事件...在DOM中做獨立的對象.. –

它的JavaScript ..所以..

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

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

來源

2016-10-19 19:46:46

Nops ... onRemove它甚至沒有調用，因爲onToggleTodo之前被調用...然後this.setState使反應重新呈現... –

內蒙古按鈕onClick事件不被解僱與反應

回答

相關問題