this.state.value是undefined，儘管設置爲

Question

我是reactjs的新手。我已經採取的示例代碼從反應文檔（https://facebook.github.io/react/docs/forms.html）和改性它非常輕微創建下面的類：

class LoginView extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {email: '', 
        password: ''}; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
    alert(this.state.email); 
    this.setState({email: event.target.email}); 
    this.setState({password: event.target.password}); 
    } 

    handleSubmit(event) { 
    alert(this.state.email); 
    var response = fetch('http://0.0.0.0:5000/v1/authtoken/', { 
     method: 'POST', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
      'Access-Control-Allow-Origin': '*' 
     }, 
     body: JSON.stringify({ 
      email: this.state.email, 
      password: this.state.password, 
     }) 
     }).then((response) => response.json()) 
    var token = response.token 
    alert([token]) 
    event.preventDefault(); 
    } 

    render() { 
    return (
     <div className="login-form"> 
     <form onSubmit={this.handleSubmit}> 
      <div className="form-group"> 
      <label htmlFor="email">Email address:</label> 
      <input type="email" className="form-control" id="email" value={this.state.email} onChange={this.handleChange}/> 
      </div> 
      <div className="form-group"> 
      <label htmlFor="pwd">Password:</label> 
      <input type="password" className="form-control" id="pwd" value={this.state.password} onChange={this.handleChange}/> 
      </div> 
      <div className="checkbox"> 
      <label><input type="checkbox"/> Remember me</label> 
      </div> 
      <button type="submit" className="btn btn-default">Submit</button> 
     </form> 
     </div> 
    ); 
    } 
} 

export default LoginView 

類的目的是提出一個登錄表單，其將發佈的電子郵件的值和密碼字段到端點。我正在將頭髮拉出this.state對象的行爲方式。

請注意，handleSubmit和handlechange中都有警報。這些警報應該包含電子郵件字段的值，但它們會包含值undefined。令我困惑的是，這些字段本身（其中也包含來自this.state.email的值）實際上是有效的。這意味着狀態以某種方式被保存，但它在功能中不可用。

我一直在爲此付出數小時的時間，並對如何獲得這種行爲感到迷茫。任何幫助將非常感激。

Answer 1

handleChange（）,event.target.email和event.target.password無效。

event是正在改變的特定字段的onChange事件。 event.target返回DOMEventTarget（https://facebook.github.io/react/docs/events.html），它是分派事件的對象的引用。

所以在你的情況下，event.target是觸發onChange的輸入字段。

您將需要更新這：

// If you use ES6 you can do this to use `event.target.type` as a key 
handleChange(event) { 
    this.setState({ 
    [event.target.type]: event.target.value 
    }); 
} 
// Otherwise, you can do it like this 
handleChange(event) { 
    var newState = {}; 
    newState[event.target.type] = event.target.value; 
    this.setState(newState); 
} 

event.target.type將返回<input>型這對於你的情況是要麼「電子郵件」或「密碼」。和event.target.value將返回您想要更新的值。

附加說明：調用.setState（nextState）將執行nextState的淺合併到當前的狀態。因此，您無需在handleChange函數中更新電子郵件和密碼。 https://facebook.github.io/react/docs/react-component.html#setstate