1つのフォームから複数の小道具をどのように扱うのですか？

Question

2つの異なる反応クラスの間でフォームの入力値を渡そうとしています。以下のコードは動作しています。ユーザーがフォームに名前を入力したら、[送信]をクリックします。彼らは新しいビューにジャンプし、彼らが入力した名前は状態に保存され、小道具として取得することができます。これは

<form onSubmit={this.handleClick}> 
      <input type="text" id="playerName" value={this.state.name} onChange={this.handleChange} placeholder="name" /> 
      <input type="submit" value="submit" /> 
      </form> 

if (this.state.results){ 
     output = <Decision name={this.state.value}/>; 
    } 

handleChange: function(event){ 
    this.setState({name: event.target.value}) 
    }, 

私の問題は、私はフォームに新しい入力タイプを追加知っているしたいということです動作します。今回はemailです。 しかし私はエラーを作り続けているのと同じロジックでそれを複製することはできません。

if (this.state.results){ 
      output = <Decision name={this.state.value} email={this.state.value}/>; 
     } 

私は（上記の）新しい小道具を追加しようとしたが、これまで私は名前フィールドに入力したとき、これはまた、（私は同じ状態を更新していますおそらくので）電子メールフィールドにテキストを入力します。電子メールの支柱を作成し、この状態を保存して取得するにはどうすればよいですか？ 小道具はemail={this.state.email}と同じくらい簡単にできますか？

Answer 1

if (this.state.results){ 
     output = <Decision name={this.state.value} email={this.state.value}/>; 
    } 

ここでは、単一の状態：値から名前と電子メールの両方の値を使用しています。

電子メールの変更を管理するには、追加の状態を宣言する必要があります。これは次のようになります。

this.state = { 
    nameValue: '', 
    emailValue: '', 
}; 

さらに、handleChangeには2つの異なるメソッドが必要です。このようになりますhandleNameChangeとhandleEmailChange、何かのように：

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

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

は、その後、あなたの入力は次のように変更されます。最後に

<form onSubmit={this.handleSubmit}> 
    Name: <input type="text" value={this.state.nameValue} onChange={this.handleNameChange} /> 
    Email: <input type="email" value={this.state.emailValue} onChange={this.handleEmailChange} /> 
    <input type="submit" value="Submit" /> 
    </form> 

、あなたがこのような小道具として新しい電子メールを渡すことができます。

if (this.state.results){ 
     output = <Decision name={this.state.nameValue} email={this.state.emailValue}/>; 
    } 

ここでの実例はcodepen

です