Este es mi código. Quiero obtener ambos datos en el objeto y el elemento de destino usando el evento onClick. Alguien puede ayudarme.
handleClick = (data) => { console.log(data); } <input type="checkbox" value={data.id} defaultChecked={false} onClick={this.handleClick.bind(null, data)}/>¿Qué pasa con el uso de una función de flecha en el controlador 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))}/>Puede usar atributos de elementos de data- y estarán disponibles en el elemento de destino:
import React from 'react' export default MyComponent = () => { const onClick = event => { console.log(event.target.dataset.user) } return <div data-user="123" onClick={onClick}>Click me!</div> }Pruebe esta variante de código:
handleClick = (data, e) => { console.log(e.target.value, data); } <input type="checkbox" value={data.id} defaultChecked={false} onClick={this.handleClick.bind(this, data)}/>