내 React 'onClick' 기능이 렌더링 시 트리거되는 이유는 무엇입니까?

렌더링 시 React onClick 함수 실행

상위 구성 요소로부터 데이터를 받는 구성 요소 내에서 React의 onClick 기능을 사용할 때 일반적인 문제가 발생합니다. onClick 함수가 잘못 정의되면 사용자 클릭 이벤트를 기다리는 대신 렌더링 중에 의도치 않게 트리거될 수 있습니다.

문제를 이해하기 위해 제공된 예제 코드를 분석해 보겠습니다.

var taskNodes = this.props.todoTasks.map(function(todo) {
    return (
        <div>
            {todo.task}
            <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
        </div>
    );
}, this);

문제는 onClick 이벤트 핸들러에 있습니다. 현재 this.props.removeTaskFunction(todo)이 직접 호출되어 렌더링 중에 즉시 함수를 실행합니다. onClick 함수는 버튼을 클릭할 때만 호출되어야 하기 때문에 이는 원하는 동작이 아닙니다.

이 문제를 해결하려면 함수 참조를 호출하는 대신 함수 참조를 전달하도록 코드를 수정해야 합니다.

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

화살표 함수를 사용하면 RemoveTaskFunction이 즉시 호출되지 않고 대신 사용자 클릭 이벤트가 실행될 때까지 기다립니다. 화살표 기능은 ES6에서 도입되었으며 React 0.13.3 이상에서 지원됩니다.

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