react js複数入力フォーム

Question

reactjsでフォーム入力を作成しようとしています。以下のコードは1つのフォーム入力に対してのみ機能します。

今、私は

以下

Firstname <input type="text" id="fname" name="fname"><br> 
Lastname <input type="text" id="lname" name="lname"><br> 

ごとに2つのフォーム入力を追加したいが、私は上記の2つのフォーム入力を実装する作業コードです。 ソース

https://reactjs.org/docs/forms.html

class NameForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: ''}; 

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

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

    handleSubmit(event) { 
    alert('A name was submitted: ' + this.state.value); 
    event.preventDefault(); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <label> 
      Name: 
      <input type="text" value={this.state.value} onChange={this.handleChange} /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
    ); 
    } 
} 

Answer 1

私が反応してフォームを管理するために見つけた最良の方法は、あなたの<input>タグのそれぞれがname値を持っていることを確認することです。次に、コンポーネントの状態にnameと正確に一致する各入力のフィールドがあることを確認します。あなたのonChangeハンドラで

、あなたがして言うことができる：

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

これは、入力のいずれかに変更して状態を更新し、その特定の状態値に変更を適用します。

次に、handleSubmitの場合は、フォームの情報を処理する必要がある州からその値を送信します。