HTML輸入未在句柄上更新

Question

當我在輸入上輸入時，他們不會使用我輸入的文本進行更新。如果我在所有表單上使用「this.state.value」，它們將使用相同的文本同時更新所有內容。

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 

export default class ContactArea extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      name: '', 
      email: '', 
      tel: '', 
      company: '', 
      msg: '' 
     }; 
     this.handleChange = this.handleChange.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
     this.setState({value: event.target.value}); 

    } 

    handleSubmit(event) { 
     alert(this.state.value); 
     event.preventDefault(); 
    } 

    render() { 
     return (
      <form onSubmit={this.handleSubmit}> 
       <div class="row"> 
        <div class="col-lg-6 form-group"> 
         <label class="label-width"> 
          Nome: 
          <input class="form-control" type="text" value={this.state.name} onChange={this.handleChange} /> 
         </label> 
        </div> 
        <div class="col-lg-6 form-group"> 
         <label class="label-width"> 
          Email: 
          <input class="form-control" type="text" value={this.state.email} onChange={this.handleChange} /> 
         </label> 
        </div> 
        <div class="col-lg-6 form-group"> 
         <label class="label-width"> 
          Telefone: 
          <input class="form-control" type="text" value={this.state.tel} onChange={this.handleChange} /> 
         </label> 
        </div> 
        <div class="col-lg-6 form-group"> 
         <label class="label-width"> 
          Empresa: 
          <input class="form-control" type="text" value={this.state.company} onChange={this.handleChange} /> 
         </label> 
        </div> 
        <div class="col-lg-12 form-group"> 
         <label class="label-width"> 
          Mensagem: 
          <textarea class="form-control" type="text" value={this.state.msg} onChange={this.handleChange} /> 
         </label> 
        </div> 
        <div class="col-lg-12"> 
         <input type="submit" value="submit" class="btn btn-primary button-width button-spacing" /> 
        </div> 
       </div> 
      </form> 
     ); 
    } 

} 

Answer 1

現在您正在清除原始狀態和剛設置的值。試試這個

handleChange(event, type) { 
    const newState = {}; 
    newState[type] = event.target.value; 
    this.setState(newState); 
} 

，並在JSX每個項目

<input class="form-control" type="text" value={this.state.name} onChange={this.handleChange.bind(this, 'name')} /> 

第二個參數「名」將被傳遞到handleChange，這將在當前狀態下

僅更新名稱或者，您可以爲每個字段創建一個函數handleNameChange，handleEmailChange等等。然後只更新與該字段相關的部分狀態

handleNameChange(event) { 
    this.setState({ name: event.target.value }); 
} 

handleEmailChange(event) { 
    this.setState({ email: event.target.value }); 
} 

... 

Answer 2

您遇到問題的原因是什麼，你現在都在做的事情是每一個字符輸入您最終創建您的狀態對象的新value屬性，它是不是你要到什麼時候這樣做是因爲它總是最多隻包含一個字符，即您輸入的最後一個字符，即使這個單個字符也沒有更新輸入的原因是因爲您不是指任何輸入內的this.state.value，也不是如果你不得不去，因爲這是不正確的。

（作爲這樣一份說明，狀態不會影響您的其他狀態屬性。）

所以這樣我會建議你解決這個問題如下：

添加name屬性各您輸入

<input class="form-control" type="text" name="name" value={this.state.name} onChange={this.handleChange} /> 
<input class="form-control" type="text" name="email" value={this.state.email} onChange={this.handleChange} /> 
<input class="form-control" type="text" name="tel" value={this.state.tel} onChange={this.handleChange} /> 
<input class="form-control" type="text" name="company" value={this.state.company} onChange={this.handleChange} /> 
<textarea class="form-control" type="text" name="msg" value={this.state.msg} onChange={this.handleChange} /> 

然後修改handleChange如下：

handleChange(event) { 
    this.setState({ [e.target.name]: e.target.value }); 
} 

方括號是ES6的功能稱爲計算屬性