onClick 함수가 React에서 렌더링 시 트리거되는 이유와 이를 방지하는 방법은 무엇입니까?

React에서 렌더링 시 onClick 함수가 실행되는 이유와 이를 방지하는 방법은 무엇입니까?

객체 목록 및 삭제 함수를 전달할 때 하위 구성 요소에 추가하고 .map() 함수를 사용하여 객체를 표시하면 렌더링 중에 버튼의 onClick 함수가 트리거되는 것으로 나타났습니다. 이는 발생해서는 안 됩니다.

이 문제를 해결하고 onClick 함수의 실행을 방지하려면 on render:

설명:

원본 코드에서 onClick 이벤트 핸들러는 함수에 대한 참조로 전달되는 대신 직접 호출됩니다. 이는 버튼을 클릭할 때가 아니라 구성요소가 렌더링될 때 함수가 실행된다는 의미입니다.

해결책:

이 문제를 해결하려면 다음과 같은 화살표 기능을 사용하세요. 그래서:

<button type="submit" onClick={() => { this.props.removeTaskFunction(todo) }}>Submit</button>

ES6에 도입된 화살표 함수를 사용하면 function 키워드를 명시적으로 선언하지 않고도 익명 함수를 정의할 수 있습니다. 이 경우 버튼을 클릭할 때까지 화살표 함수가 호출되지 않으므로 렌더링 시 onClick 함수가 실행되지 않습니다.

위 내용은 onClick 함수가 React에서 렌더링 시 트리거되는 이유와 이를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!