>source

이것은 나의 첫 번째 React 앱입니다 ([email protected] ). 기능 기반 구성 요소와 클래스 기반 구성 요소를 사용할 때 onClick 이벤트가 다르게 처리되는 이유를 찾으려고합니다.

알고 있듯이 클래스 기반 c를 사용해야합니다. 상태를 변경해야 할 때만 맞습니까?

기능 기반 구성 요소가 _this is undefined error 를 발생시킵니다.  그러나 클래스 기반-아닙니다.

두 경우 모두 바인드 기능 대신 화살표 기능을 사용하고 있습니다.

기능 기반 :

import React from 'react';
const AnswersDisplay = (props) => {
// even with bind I still get "_this is undefined"
//this.onAnswer = this.onAnswer.bind(this); 
  const answerList = props.answerList.map( (option) => {
    return (
      <button
        onClick={this.onAnswer}
        value={option}
        className="ui basic green button">{option}
      </button>
    )
  }); 
  const onAnswer = (e) =>{
    console.log(e.target.value);
  }
  return(
    <div className="ui two buttons hSpace">{this.answerList}</div>
  );
};
export default AnswersDisplay;

vs 작동하는 클래스 기반.

import React from 'react';
class AnswersDisplay extends React.Component {
  constructor(props) {
    super(props);
    //this.onAnswer = this.onAnswer.bind(this);
  }
  answerList = this.props.answerList.map( (option) => {
    return (
      <button
        onClick={this.onAnswer}
        value={option}
        className="ui basic green button">{option}
      </button>
    )
  });
  onAnswer = (e) =>{
    console.log(e.target.value);
  }
  render() {
    return(
        <div className="ui two buttons hSpace">{this.answerList}</div>
    );
  }
};

export default AnswersDisplay;

  • 답변 # 1

    기능적 구성 요소의 경우, 내부에 기능을 유지하면서 상수를 선언합니다. 버튼을 클릭했을 때 전화를 걸 수 있습니다. 그러나 this 의 사용법을 확인하십시오  함수에서. 와이즈 비즈  이 경우 전역 실행 컨텍스트를 참조하고 특정 컨텍스트에서 JavaScript 엔진은 this 속성을 찾지 못합니다.  그래서 onAnswer 를 반환합니다 .

    이 작업을하려면 undefined 없이 다시 전화를 걸어야합니다. .

    와이즈 비즈 와이즈 비즈

    전체적으로 코드는 다음과 같습니다.

    this
    
    

  • 답변 # 2

    이 MDN 웹 문서는

    Like that: 에 대해 알아야 할 모든 것을 다룹니다. .

    간단하게 유지하려면 onClick={onAnswer} 의 관점에서 생각하십시오. 여기서 import React from 'react'; const AnswersDisplay = (props) => { // even with bind I still get "_this is undefined" //this.onAnswer = this.onAnswer.bind(this); const answerList = props.answerList.map( (option) => { return ( <button onClick={onAnswer} value={option} className="ui basic green button">{option} </button> ) }); const onAnswer = (e) =>{ console.log(e.target.value); } return( <div className="ui two buttons hSpace">{this.answerList}</div> ); };  다음과 같은 경우가 아니면 "정의되지 않음"입니다 :

    방법/기능이 this 에 바인딩되었습니다  ES5의 objects 와 함께  (아래 참고 참조) 또는 this 외부로 반동  외부 함수를 object 와 리 바인드함으로써  자체 : bind(this) .

    참고: 아래에 설명 된대로 (방법 6에서) ES5 object 를 사용하는 경우 예외가 있습니다   object 의 내부  이는 포함 어휘 범위 bind(obj) 를 유지한다는 의미입니다.  묶을 필요가 없습니다.

    예 :

    arrow functions
    
    

    object 에 관해서 , 그들은 this 의 템플릿입니다 . 그래서 this.prop = "global prop" const outsideArrowFunction = () => (this.prop) function outsideFunction() { return this.prop; }; const obj = { prop: "obj's prop", method: function() { return this.prop; // returns "obj's prop" }, method2: function() { return this; // returns the entire "obj" and its properties }, method3: function() { return this.method(); // returns "obj's prop" }, method4: function() { return outsideFunction(); // returns "global prop" because the outsideFunction's lexical scope doesn't recognize the "obj"'s nor its properties }, method5: function() { return outsideArrowFunction(); // same as method4, utilizes global this }, method6: function() { const x = () => this.method(); return x(); // returns "obj's prop" because arrow functions take on "this" from the "obj" }, method7: function() { const x = function() { return this.prop; }; return x(); // returns "global prop" because "this" loses lexical scope upon execution }, method8: function() { const x = this.method.bind(this); return x(); // returns "obj's prop" because "this" refers to the "obj" upon execution }, method9: function(callback) { return callback(this.method); }, method10: function() { return this.method9(function(callback) { return callback(); // returns "global prop" because "this" loses lexical scope upon execution }); } }; const a = outsideArrowFunction.bind(obj); // returns "global prop" because arrow functions take on whatever "this" is upon its creation, so "this" refers to the global "this" const b = outsideFunction.bind(obj); // returns "obj's prop" since a traditional function can rebind "this", which has been rebound to "obj" console.log(`Method: ${obj.method()}`); console.log(`Method2: ${obj.method2()}`); console.log(`Method3: ${obj.method3()}`); console.log(`Method4: ${obj.method4()}`); console.log(`Method5: ${obj.method5()}`); console.log(`Method6: ${obj.method6()}`); console.log(`Method7: ${obj.method7()}`); console.log(`Method8: ${obj.method8()}`); console.log(`Method10: ${obj.method10()}`); console.log(`arrowFunction: ${a()}`); console.log(`outsideFunction: ${b()}`);   classes 가 될 것입니다  또는 세계적인 objects  클래스 this 가 아니면   undefined 에 묶여있다  아니면 당신은 this 를 사용 . 각 버튼을 클릭하여 아래 예를 시도해보세요.3 가지 방법이 모두 어떻게 작동하는지 확인하지만호출 방법에 따라:

    method
    
    

    constructor
    
    

    arrow function

관련 자료

  • 이전 sql - 하나의 테이블 "셀"MySQL에 대해 여러 값을 선택하는 방법
  • 다음 Java EE @Schedule 및 서버 다운