this.state null在reactjs组件

我只是想尝试一些简单的事情，例如只在handleSubmit函数中打印this.state.validForm，但我似乎无法访问this.state.validForm。首先我直接尝试这个功能，但无济于事。我是新来的反应。this.state null在reactjs组件

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;

来源

2016-03-18 Raul Gomez

的[参考文献做出反应并没有的setState与ES6工作]可能的复制（http://stackoverflow.com/questions/29577977/react-ref-和-setstate-not-working-with-es6） –

同样考虑以'getInfoForm'的方式预先绑定你的'handleSubmit'。 – ffxsam

问题出在您的render方法。您的onSubmit事件有其自己的上下文，因此当您执行this.handleSubmit时，您会将错误的上下文传递给handleSubmit。只需绑定this，即可设置！

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

或者与建议绑定运营商：

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

来源

2016-03-18 17:37:14 ZekeDroid

谢谢，这是做到了。 –

*“如果您启用了ES7功能”*绑定操作符不是ES7功能。这仍然只是一个提议。 –

哦，感谢您的更正。 – ZekeDroid

this.state null在reactjs组件

回答

相关问题