reactjsコンポーネントのthis.state null

Question

私はhandleSubmit関数でthis.state.validFormを印刷するだけの簡単なものを試していますが、this.state.validFormにアクセスすることはできません。最初に私はこの機能を使って直接試しましたが、役に立たなかった。私は反応するのが新しいです。

import React, { Component } from 'react'; 
import TextInput from './TextInput'; 

class RequestForm extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {validForm : "false"}; 
     this.getInfoForm = this.getInfoForm.bind(this); 
    } 

    getInfoForm() { 
     return this.state.validForm; 
    } 

    handleSubmit(event) { 
     event.preventDefault(); 
     console.log('submit values are'); 
     console.log(event.target.src.value); 
     console.log(event.target.email.value); 
     console.log(this.state.validForm); 
     console.log(this.getInfoForm()); 
    } 

    render() { 
     return (
      <form onSubmit={this.handleSubmit}> 
       <TextInput 
        uniqueName="email" 
        name="email"  
        text="Email Address" 
        required={true}  
        minCharacters={6} 
        validate="email" 
        errorMessage="Email is invalid" 
        emptyMessage="Email is required" 
       /> 

       <TextInput 
        text="User" 
        name="User src" 
        required={true} 
        minCharacters={3} 
        validate="notEmpty" 
        errorMessage="Name is invalid" 
        emptyMessage="Name is required" 
       /> 

       <button type="submit">Submit</button> 
      </form> 
     ); 
    } 
} 

export default RequestForm; 

Answer 1

問題はrenderメソッドにあります。 onSubmitイベントには独自のコンテキストがあるため、this.handleSubmitを実行すると、間違ったコンテキストをhandleSubmitに渡すことになります。単純にバインドthisと設定されます！

<form onSubmit={this.handleSubmit.bind(this)}> 

または提案されたバインド演算子と

：[ES6で作業していないrefとSETSTATEに反応]の

<form onSubmit={::this.handleSubmit}>