반응: 이벤트 핸들러에서 null입니다.

반응: 이벤트 핸들러에서 null입니다.

Login Form 컴포넌트가 있습니다.제출하기 전에 두 가지 모두 확인하고 싶습니다.loginName그리고.password설정되었습니다.이 코드를 사용하여 시도했습니다(많은 항목이 생략되었습니다).

class LoginForm extends Component {

  constructor() {
    super();

    this.state = {
      error: "",

      loginName: "",
      password: "",
      remember: true
    };
  }


  submit(e) {
    e.preventDefault();
    if(!this.state.loginName || !this.state.password) { //this is null
      this.setState({ error: "Fill in both fields" });
    } else {
      console.log("submitting form");
    }
  }

  render() {
    return (
      <div className="col-xs-12 col-sm-6 col-md-4">
        <form className="login" onSubmit={this.submit}>
          <button type="submit" className="btn btn-default">Sign in</button>
        </form>
      </div>
    );
  }
}

export default LoginForm;

하지만, 저는TypeError이벤트 핸들러에서 다음과 같이 말합니다.thisnull 입니다.

어떻게 하면 좋을까요?

셋팅이 필요this위해서submit방법: 왜냐하면 지금this이undefined이 조작에서는, 를 사용할 수 있습니다..bind

onSubmit={ this.submit.bind(this) }

Example

또는 화살표 기능을 사용할 수 있습니다.

onSubmit={ (e) => this.submit(e) }

Example

리액트는 이전에 이 콜백을 바인딩하고 있었습니다.하지만 지금은 없어져서 직접 묶거나 포장지를 만들어서

onSubmit={() => this.submit()}

다음 파일을 바인드하지 않았습니다.thisES6 클래스 속성 기능을 사용하여 문제를 가장 깔끔하게 해결할 수 있습니다.따라서 필요한 것은 다음과 같습니다.

   submit = (e) => {
      // some code here
   }

화살표 함수는 자동으로 바인드합니다.컨스트럭터에서 바인드하는 것보다 훨씬 좋습니다.가장 중요한 것은 절대 이런 식으로 바인드하지 않는 것입니다.

onSubmit={() => this.submit()}

javascript의 오브젝트인 함수가 생성되어 메모리가 필요하게 되고, redner 함수 내에 상주하게 되어 매우 고가입니다. render함수는 여러 번 실행되는 코드의 일부입니다.submit함수도 생성되어 퍼포먼스와 관련된 문제가 발생합니다.따라서 코드는 다음과 같습니다.

class LoginForm extends Component {
  submit = (e) => {
    // some code here
  }

  render() {
    return (
        <form className="login" onSubmit={ this.submit }>
          <button type="submit" className="btn btn-default">Sign in</button>
        </form>
      );
    }
}

export default LoginForm;

여기에서는 퍼포먼스 문제가 발생하지 않고 바인딩 문제도 발생하지 않으며 코드도 훨씬 좋아 보입니다.

Babel을 사용하는 사용자는 transform-function-bind 플러그인과 함께 bind 연산자를 사용할 수 있습니다.

onSubmit={::this.submit}

이것은 다음을 위한 통사당입니다.

onSubmit={this.submit.bind(this)}

언급URL : https://stackoverflow.com/questions/33631482/react-this-is-null-in-event-handler