React onClick-매개 변수로 이벤트 전달

매개 변수없이

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 bind 함수를 사용하는 것이 솔루션 1에서 화살표 함수 방식보다 더 나은 것으로 간주됩니다. 이벤트 매개 변수는 핸들러 함수의 마지막 매개 변수 여야합니다.

function clickMe(parameter, event){
}

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

새로운 콜백 생성 문제를 완전히 해결하려면 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-* .

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