フォーム提出から2つの入力フィールドの状態を更新する

Question

Reactを使用して簡単な連絡フォームを作成しようとしています。最終的に状態から収集されたデータをデータベースに送信しますが、今は正しい値をコンソールログに記録しようとしています。

メールフィールドは名前フィールドよりも優先され、コンソールログの両方の状態では名前が表示され、メールは未定義です。ここに私のevent.target.emailへの参照がイベント要素上に存在しないコンポーネント

import React, { Component, PropTypes } from 'react'; 
import ContactData from '../data/ContactData.js'; 


class FormContact extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      name: '', 
      email: '', 
      textArea: '' 
     } 
    } 

    handleChange(event) { 
     event.preventDefault(); 
     this.setState({ 
      name: event.target.value, 
      email: event.target.email 
     }) 
    } 

    handleSubmit(event) { 
     event.preventDefault(); 
     console.log(this.state.name + ' ' + this.state.email); 
    } 

    render() { 
     return (
      <form onSubmit={this.handleSubmit.bind(this)}> 
       <label> Name: 
        <input type="text" placeholder="Name" value={this.state.name} onChange={this.handleChange.bind(this)} /> 
       </label><br /> 
       <label> Email: 
        <input type="text" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this)}/> 
       </label><br /> 
        <input className="btn btn-primary" type="submit" value="Submit" /> 
      </form> 
     ) 
    } 
} 

FormContact.PropTypes = { 
    subName: PropTypes.string, 
    subEmail: PropTypes.string 
} 

FormContact.defaultProps = { 
    subName: 'Sam', 
    subEmail: '' 
} 

class Contact extends Component { 
    render() { 
     return (
      <div> 
       <h1>CONTACT PAGE</h1> 
       <FormContact /> 
      </div> 
     ) 
    } 
} 


export default Contact; 

Answer 1

私はあなたが望むものを理解していれば、以下のように、あなたがそれを行うことができます：

• はのためのあなたの状態で空のオブジェクトを追加します。フォームの値

  formValues: {}

• は、あなたのフィールド

  にname属性を追加します。 10

  <input name="name" .... /> <input name="email" .... />

• その名前に依存

  let formValues = this.state.formValues; 
  let name = event.target.name; // Field name 
  let value = event.target.value; // Field value 
  
  formValues[name] = value; 
  
  this.setState({formValues}) 
  

• handleChange機能で自分の状態を更新し、値が1つのレベル深く行けば、あなたは value={this.state.formValues["name"]}の代わりvalue={this.state.name}使用することができます - nameは入力フィールドのname属性の値です。

次のようにこのように、すべてが一緒にする必要があります：

class Test extends React.Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      formValues: {} 
     } 
    } 

    handleChange(event) { 
     event.preventDefault(); 
     let formValues = this.state.formValues; 
     let name = event.target.name; 
     let value = event.target.value; 

     formValues[name] = value; 

     this.setState({formValues}) 
    } 

    handleSubmit(event) { 
     event.preventDefault(); 
     console.log(this.state.formValues); 
    } 

     render(){ 
     return (
     <form onSubmit={this.handleSubmit.bind(this)}> 
       <label> Name: 
        <input type="text" name="name" placeholder="Name" value={this.state.formValues["name"]} onChange={this.handleChange.bind(this)} /> 
       </label><br /> 
       <label> Email: 
        <input type="text" name="email" placeholder="Email" value={this.state.formValues["email"]} onChange={this.handleChange.bind(this)}/> 
       </label><br /> 
        <input className="btn btn-primary" type="submit" value="Submit" /> 
      </form> 
    ) 
    } 
} 

React.render(<Test />, document.getElementById('container')); 

Here is fiddle.

は、この情報がお役に立てば幸いです。

Answer 2

を反応させるのです。インラインイベントハンドラからのテキスト入力の値は、電子メールと名前の両方に対してevent.target.valueとなります。迅速な解決策は、入力ごとに個別のハンドラを作成することです：

handleChangeName(event) { 
    event.preventDefault(); 
    this.setState({ name: event.target.value }); //<-- both use the same reference 
}            // to get the contextual value 
handleChangeEmail(event) {      // from the inputs v 
    event.preventDefault();      //     | 
    this.setState({ email: event.target.value }); //<-------------------- 
}