Получить данные объекта и целевой элемент из события onClick в реакции js

Это мой код. Я хочу получить как данные в объекте, так и в целевом элементе, используя событие onClick. Может кто-нибудь мне помочь.

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

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

Ответ 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))}/>

Ответ 2

Во-первых, если вы привязываете null, вы не получите никакого контекста и объекта UIEvent.

Вам нужно изменить onClick на 'onClick = {this.handleClick} `.

И ваша функция дескриптора должна выглядеть как

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

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

Ответ 3

Попробуйте этот вариант кода:

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

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