>
안녕하세요. 이벤트에서 트리거 된 함수가있을 때 javascript/react가 어떻게 진행되고 있는지 이해하고 싶습니다. 나는 세 가지 다른 코드 단계를 보여줄 것인데, 그중 하나는 작동하지 않았으며, 그중 하나는 작동하지 않았습니다. :)

setField(e){console.log("in setfield", e)}
<select multiple className="form-control" id="sel2" name="sellist2"
      onChange={() => this.setField()}>

이 값은 값을 기대하는 함수에 null 값을 전달하기 때문에 작동하지 않습니다 (이 경우 e). 그러나 함수가 이미 상태에있는 것을 제출 한 경우에는 적절한 방법입니다.

setField(e){console.log("in setfield", e)}
<select multiple className="form-control" id="sel2" name="sellist2"
      onChange={(e) => this.setField(e)}>

이벤트를 e로 받고 나서 함수에 전달하기 때문에 작동합니다. 이벤트를 e와 연관시키는 방법을 어떻게 알 수 있습니까? 이 기능이 html을 다룰 때 다른 것까지 확장됩니까?

setField(e){console.log("in setfield", e)}
<select multiple className="form-control" id="sel2" name="sellist2"
      onChange={this.setField}>

이것은 왜 그것이 왜 효과가 있는지 이해하지 못하지만, 그렇지 않습니다. 기본적으로 이벤트를 함수에 전달하는 것이 본질적으로 알고 있다고 가정합니다. 이 내장 논리는 다른 곳에서 발생합니까? 이벤트에는 필요하지 않습니까?

다시 감사합니다. 자바 스크립트를 처음 접했기 때문에 자바 스크립트의 모든 우상 동기를 배우는 것이 흥미 롭습니다. 슬프게도 대부분의 학습은 디버깅의 좌절을 통해 이루어집니다!


  • 답변 # 1

    자바 스크립트의 모든 함수는 함수가 아무 것도 수행하지 않더라도 임의로 많은 수의 매개 변수를 전달할 수 있습니다. 예를 들어 쓸모없는 경우 다음이 합법적입니다.

    function thingThatExpectsZeroParams() {
      console.log('hello');
    }
    thingThatExpectsZeroParams(1, 2, 3, 4, [5], 'six');
    
    

    6 개의 데이터 조각이 함수에 전달되었지만 함수가 아무 것도 수행하지 않았기 때문에 아무 작업도 수행되지 않았습니다. 전달 된 값에 액세스하려면 호출 할 이름을 선택하면됩니다. 이 이름은 함수의 로컬 이름이며 원하는 이름이 될 수 있습니다.

    function callback(event) {
      console.log(event);
    }
    // I could also just have easily called it something else, and the code would work just as well
    // function callback(quesoBurrito) {
    //   console.log(quesoBurrito);
    // }
    callback('hello');
    
    

    따라서 다음과 같이 리스너를 설정할 때 :

    onChange={() => this.setField()}
    
    

    이벤트 객체를 전달하여 함수가 호출됩니다. 그러나 함수가 첫 번째 매개 변수에 이름을 지정하지 않으므로 액세스 할 수있는 방법이 없으며 this.setField를 호출하면 아무것도 전달하지 않습니다.

    이 리스너와 대조적으로 :

    onChange={(e) => this.setField(e)}
    
    

    이벤트 객체를 전달하여 함수가 다시 호출됩니다. 이번에는 해당 인수의 이름을 'e'로 지정한 다음 원하는대로 수행 할 수 있습니다 (이 경우 setField로 전달).

    이 작업을 수행 할 때 :

    onChange={this.setField}
    
    

    중개인을 잘라 버렸습니다. this.setField는 이벤트 객체를 전달하여 직접 호출됩니다. 아마도 setField는 이것을 예상하고 전달 된 객체로 무언가를 수행합니다.

  • 답변 # 2

    복잡하지 않습니다. onChange에 할당 한 Javascript 함수는 적절한 시간에 호출되며 일반적으로 e 라는 단일 인수를 전달합니다. . 해당 인수에 함수에서 원하는 이름을 지정하거나 전혀 선언하지 않을 수 있지만 첫 번째 인수가 있습니다.

    이렇게하면 :

    onChange={() => this.setField()}
    
    

    이벤트 핸들러로 전달 된 인수를 무시하고 이벤트 핸들러 내에서 this.setField() 를 호출합니다.  놀랍게도 setField() 에 대한 논쟁을 전달하지 않습니다. . 실제로 실제로 일어나는 일은 다음과 같습니다.

    onChange={(e) => this.setField()}
    
    
    와이즈 비즈

    DOM 사양에 따르면 onChange 이벤트 핸들러가 호출되면

    How does it know to associate the event to e? does this functionality extent to other things when dealing with html?

    가 전달됩니다.  객체를 첫 번째 인수로 선언하십시오 (선언하든 아니든 함수에 대한 첫 번째 인수가 있습니다). 이것은 자바 스크립트에서 콜백이 작동하는 방식입니다. 콜백의 발신자는 콜백을 전달할 인수를 결정합니다. 인수를 선언하고 사용하는지 여부에 관계없이 콜백을 선언하는 것은 귀하에게 달려 있습니다. 신고 방법에 관계없이 발신자가 전달합니다.

    이 코드 섹션 :

    e
    
    

    onChange 이벤트 핸들러가 되고자하는 함수는 onChange={this.setField} 입니다.  방법. 따라서 DOM이 해당 메소드를 호출 할 때 위 예제와 같이 이벤트 객체를 첫 번째 인수로 전달합니다.

    와이즈 비즈

    앞에서 설명한 것처럼 DOM 사양은이 이벤트 핸들러가 지정되는 곳입니다. 그것의 정의에서, 당신이이 이벤트 핸들러로 등록한 콜백 함수로 전달 될 인수가 무엇인지 설명합니다. 이것은 Javascript의 모든 콜백에 적용됩니다. 발신자는 콜백에 전달할 대상을 결정합니다. 이것은이 유형의 이벤트 핸들러에만 국한되지 않습니다. 콜백은 Javascript에서 많은 곳에서 사용됩니다. setField() 와 같은 것조차  콜백을 가져오고 콜백에 전달할 인수를 결정하는 콜백 (이 경우 Array 객체의 구현)의 호출자입니다.

    This one I really dont understand why it works, but it does. I am assuming that it inherently know to pass the event as default to the function. again does this inbuilt logic occur anywhere else, maybe not neccessarily for events?

관련 자료

  • 이전 특정 클래스의 jQuery 선택기
  • 다음 python - 키 이벤트 바인딩으로 tkinter 클래스의 이미지를 업데이트하는 방법은 무엇입니까?