react js의 onClick 이벤트에서 객체 데이터 및 대상 요소 가져오기

react js의 onClick 이벤트에서 객체 데이터 및 대상 요소 가져오기

이건 내 암호야onClick 이벤트를 사용하여 오브젝트 요소와 타깃 요소의 데이터를 모두 가져오고 싶습니다.누가 좀 도와줘요.

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

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

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))}/>

사용할 수 있습니다.data-대상 요소에서 사용할 수 있습니다.

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>
}

다음 종류의 코드를 사용해 보십시오.

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

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

첫째, 당신이 묶는다면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 });
};

언급URL : https://stackoverflow.com/questions/42576198/get-object-data-and-target-element-from-onclick-event-in-react-js