Respon on Click - 매개 변수를 사용하여 이벤트 전달

Respon on Click - 매개 변수를 사용하여 이벤트 전달

파라미터 미사용 안 함

function clickMe(e){
  //e is the event
}

<button onClick={this.clickMe}></button>

파라미터 포함

function clickMe(parameter){
  //how to get the "e" ?
}
<button onClick={() => this.clickMe(someparameter)}></button>

나는 그 물건을 사고 싶다.event어떻게 구할 수 있죠?

이것을 시험해 보세요.

<button 
   onClick={(e) => {
      this.clickMe(e, someParameter);
   }}
>
Click Me!
</button>

그리고 당신의 기능:

function clickMe(event, someParameter){
     //do with event
}

ES6에서는 다음과 같이 단축할 수 있습니다.

const clickMe = (parameter) => (event) => {
    // Do something
}

사용방법:

<button onClick={clickMe(someParameter)} />

솔루션 1

function clickMe(parameter, event){
}

<button onClick={(event) => {this.clickMe(someparameter, event)}></button>

솔루션 2 솔루션 1에서는 바인드 함수를 사용하는 것이 화살표 함수 방식보다 나은 것으로 간주됩니다.이벤트 파라미터는 핸들러 함수의 마지막 파라미터여야 합니다.

function clickMe(parameter, event){
}

<button onClick={this.clickMe.bind(this, someParameter)}></button>

ES6를 사용한 커링의 예:

const clickHandler = param => event => {
  console.log(param); // your parameter
  console.log(event.type); // event type, e.g.: click, etc.
};

핸들러를 전환하는 버튼:

<button onClick={(e) => clickHandler(1)(e)}>Click me!</button>

이벤트 오브젝트 없이 이 함수식을 호출하려면 다음과 같이 호출합니다.

clickHandler(1)();

또한 react는 합성 이벤트(네이티브이벤트용 래퍼)를 사용하기 때문에 이벤트 풀링이라는 것이 있습니다.즉, 예를 들어, 이 이벤트를 사용하고 싶은 경우,event비동기적으로 오브젝트를 작성하려면event.persist():

const clickHandler = param => event => {
  event.persist();
  console.log(event.target);
  setTimeout(() => console.log(event.target), 1000); // won't be null, otherwise if you haven't used event.persist() it would be null.
};

다음은 라이브 예시입니다.https://codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark

새로운 콜백 생성 문제를 완전히 해결하려면data-*HTML5의 속성은 최적의 솔루션 IMO입니다.결국 서브컴포넌트를 추출하여 파라미터를 전달해도 새로운 함수가 생성됩니다.

예를들면,

const handleBtnClick = e => {
  const { id } = JSON.parse(e.target.dataset.onclickparam);
  // ...
};

<button onClick={handleBtnClick} data-onclickparam={JSON.stringify({ id: 0 })}>

사용 방법에 대해서는, https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes 를 참조해 주세요.data-*특성.

<Button onClick={(e)=>(console.log(e)}>Click Me</Button>

언급URL : https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter