從反應js中的onClick事件獲取對象數據和目標元素

Question

這是我的代碼。我想使用onClick事件獲取對象&目標元素中的兩個數據。 任何人都可以幫助我。

handleClick = (data) => { 
    console.log(data); 
} 

<input type="checkbox" value={data.id} defaultChecked={false} onClick={this.handleClick.bind(null, data)}/> 

Answer 1

在onClick處理函數中使用箭頭函數怎麼樣？

handleClick = (e, data) => { 
    // access to e.target here 
    console.log(data); 
} 

<input type="checkbox" value={data.id} defaultChecked={false} onClick={((e) => this.handleClick(e, data))}/> 

Answer 2

首先，如果你綁定null你不會得到任何方面的UIEvent也不對象。

您需要將onClick更改爲'onClick = {this.handleClick}`。

而且你的處理函數應該像

handleClick = (event) => { 
    const { target: { value } } = event; 

    // And do whatever you need with it's value, for example change state 
    this.setState({ someProperty: value }); 
}; 

Answer 3

試試這個代碼變種：

handleClick = (data, e) => { 
    console.log(e.target.value, data); 
} 

<input type="checkbox" value={data.id} defaultChecked={false} onClick={this.handleClick.bind(this, data)}/>