this.state reactjs 组件中为空

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}>

this.state reactjs 组件中为空

this.state null in reactjs component

reactjs

react-jsx