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組件

回答

相關問題