this.state在reactjs组件中为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)}>

或者使用建议的绑定运算符:

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