反応アプリケーション。 Submitボタンは、実際に入力された値ではなく、「タイプ」を返すだけです

Question

このアプリケーションで新しい動物オブジェクトを追加できますが、console.logを使用してハンドル送信機能の出力を確認すると、 "タイプ"。

handleSubmit(e) { 
    console.log(this.refs.type.value) 
    e.preventDefault() 
} 

render() { 
let typeOptions = this.props.types.map(type => { 
    return (<option key={type} value='type'>{type}</option>) 
}) 
return (
    <div> 
    <h3>Add an Animal</h3> 
    <form onSubmit={this.handleSubmit.bind(this)}> 
     <div> 
      <label>Species</label><br /> 
      <input type='text' ref='species' /> 
     </div> 
     <div> 
      <label>Type</label><br /> 
      <select ref="type" > 
       {typeOptions} 
      </select> 
     </div> 
     <input type='submit' value='submit' /> 
    </form> 
</div> 

Answer 1

を提出いただきました！の所望の出力を得るためにここに置き換えるために何=「型」> {形} 値ではなく、イムわからない：アイブ氏は、動物の種類を返す私のマップ方法にあるようにバグを絞り込みます

return (<option key={type} value='type'>{type}</option>) 
       ^^ 1  ^^ 2   ^^ 3 

1. このkey属性は何ですか？ It does not exist in HTML。それを取り除く
2. ここを見てください。値はハードコードされた文字列'type'に設定されています。それをしないでください。変数を使用します。
3. ここでは変数を使用しました。 value属性にも同じことをします。