내 React onClick 기능이 렌더링 시 실행되는 이유는 무엇입니까?

렌더링 시 React onClick 함수 실행

객체 목록을 렌더링하는 React 구성 요소를 생성할 때 객체와 함수를 모두 전달하는 것이 일반적입니다. 소품으로 삭제합니다. .map()을 사용하여 객체를 반복하는 것이 표준이지만 렌더링 중에 onClick 함수가 조기에 실행될 수 있습니다.

제공된 코드에서 문제는 RemoveTaskFunction이 직접 호출된다는 사실에서 비롯됩니다. onClick 이벤트 핸들러에서. 이는 버튼을 클릭할 때가 아니라 컴포넌트가 렌더링되자마자 함수가 실행된다는 것을 의미합니다.

해결책

이를 해결하려면 함수를 전달해야 합니다. onClick에 대한 화살표 기능으로 조기에 호출되지 않도록 합니다. 수정된 줄은 다음과 같습니다.

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

ES6에 도입된 화살표 함수는 함수가 호출될 때까지 실행을 지연합니다. React 0.13.3 이상에서는 화살표 기능이 완벽하게 지원됩니다. 화살표 기능을 사용하면 의도한 대로 버튼이 실제로 클릭될 때만 onClick 핸들러가 트리거됩니다.

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