렌더링 중에 React `onClick` 기능이 실행되는 이유는 무엇입니까?

React onClick 함수의 조기 실행 이해

React에서는 렌더링 중에 onClick 함수가 실행되는 이유를 파악하는 것이 중요합니다. 이 현상은 하위 구성 요소에 값을 전달할 때 발생할 수 있습니다.

문제:

객체 목록을 매핑하고 map() 함수를 사용하여 이를 표시할 때 각 개체와 연결된 버튼이 실행 중에 조기에 onClick 함수를 호출합니다. 렌더링.

원인:

이 문제의 핵심은 onClick 기능이 전달되는 방식에 있습니다. 제공된 코드에서 다음 줄이 이 동작을 담당합니다.

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

여기서 onClick 속성은 앞에 괄호를 추가하여 함수를 직접 호출합니다. 이는 onClick 핸들러가 즉시 실행되어 렌더링 중에 함수가 실행된다는 의미입니다.

해결책:

조기 실행을 방지하려면 함수 자체를 onClick을 호출하는 대신. 이는 ES6에 도입된 화살표 기능을 사용하여 달성할 수 있습니다. 수정된 코드는 다음과 같습니다.

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

설명:

이 줄에서는 화살표 함수를 사용하여 onClick에 전달되는 간결한 익명 함수를 정의합니다. 버튼을 클릭하면 화살표 함수가 todo 객체와 함께 RemoveTaskFunction을 호출합니다. 이 접근 방식을 사용하면 렌더링 중이 아니라 버튼을 클릭할 때만 onClick 기능이 트리거됩니다.

위 내용은 렌더링 중에 React `onClick` 기능이 실행되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!