렌더링시 반응 onClick 함수 발생

자식 구성 요소에 2 개의 값을 전달합니다.

1. 표시 할 객체 목록
2. 기능을 삭제하십시오.

.map () 함수를 사용하여 객체 목록을 표시합니다 (react tutorial 페이지에 제공된 예제와 같이). 그러나 해당 구성 요소의 버튼은 onClick렌더링시 함수를 시작합니다 (렌더링 시간에는 실행되지 않아야 함). 내 코드는 다음과 같습니다

module.exports = React.createClass({
    render: function(){
        var taskNodes = this.props.todoTasks.map(function(todo){
            return (
                <div>
                    {todo.task}
                    <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
                </div>
            );
        }, this);
        return (
            <div className="todo-task-list">
                {taskNodes}
            </div>
        );
    }
});

내 질문은 : 왜 onClick함수가 렌더에서 발생합니까?

onClick에 함수를 전달하는 대신 해당 함수를 호출하므로 해당 행을 다음과 같이 변경하십시오.

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

=> ES6에 도입 된 Arrow Function이라고하며 React 0.13.3 이상에서 지원됩니다.

함수를 호출하는 대신 값을 함수에 바인딩하십시오.

this.props.removeTaskFunction.bind(this, todo)

MDN 참조 : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

onClick속성 값 은 함수 호출이 아니라 함수 여야합니다.

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

화살표 함수를 사용하지 않고 더 간단한 것을 사용하는 사람들을 위해 ... signOut 함수 뒤에 괄호를 추가 할 때이 문제가 발생했습니다 ...

이것을 교체 <a onClick={props.signOut()}>Log Out</a>

이것으로 <a onClick={props.signOut}>Log Out</a>...! 😆

JSX는 HTML과 매우 유사하므로 ReactJS와 함께 사용되며 프로그래머는 HTML을 사용하는 느낌을 주지만 궁극적으로는 자바 스크립트 파일로 변환합니다.

for-loop를 작성하고 {this.props.removeTaskFunction (todo)}로 함수를 지정하면 루프가 트리거 될 때마다 함수가 실행됩니다.

이 동작을 중지하려면 함수를 onClick으로 되돌려 야합니다.

fat arrow 함수에는 bind 속성 과 함께 숨겨진 return 문이 있습니다 . 따라서 Javascript도 함수를 반환 할 수 있으므로 함수를 OnClick 으로 반환합니다 !!!!!

사용하다 -

onClick={() => { this.props.removeTaskFunction(todo) }}

그 의미는

var onClick = function() {
  return this.props.removeTaskFunction(todo);
}.bind(this);

JSX는 중괄호로 JavaScript 표현식을 평가합니다

이 경우, this.props.removeTaskFunction(todo)호출되고 리턴 값이onClick

당신이 제공해야 할 onClick것은 기능입니다. 이를 위해 익명 함수로 값을 줄 바꿈 할 수 있습니다.

export const samepleComponent = ({todoTasks, removeTaskFunction}) => {
    const taskNodes = todoTasks.map(todo => (
                <div>
                    {todo.task}
                    <button type="submit" onClick={() => removeTaskFunction(todo)}>Submit</button>
                </div>
            );
    return (
        <div className="todo-task-list">
            {taskNodes}
        </div>
        );
    }
});

비슷한 문제가 있었는데 내 코드는 다음과 같습니다.

function RadioInput(props) {
    return (
    <div className="form-check form-check-inline">
        <input className="form-check-input" type="radio" name="inlineRadioOptions" id={props.id} onClick={props.onClick} value={props.label}></input>
        <label className="form-check-label" htmlFor={props.id}>{props.label}</label>
    </div>
    );
  }
class ScheduleType extends React.Component
{
    renderRadioInput(id,label)
    {
        id = "inlineRadio"+id;
        return(
            <RadioInput
                id = {id}
                label = {label}
                onClick = {this.props.onClick}
            />
        );

    }

그것이 있어야 할 곳

onClick = {() => this.props.onClick()}

에서 RenderRadioInput

그것은 나를 위해 문제를 해결했습니다.