反応jsのSelect Box（コンポーネント）の価値を取得する方法は？

Question

私は別のページのフォームでそのコンポーネントをインポートして使用している再利用可能なSELECTドロップダウンコンポーネントを作成しました。どのように私はフォームの提出時に選択の価値を得るのですか？

import React from 'react'; 
    export default class Combobox extends React.Component {  
     render() { 
      return (

      <div className="combobox-wrapper"> 
       <select className="form-control"> 
       { 
        this.props.combolist.map(function(item, i) { 
         return (
         <option key={i} value={item.name}>{item.name}</option> 
        ) 
        }) 
        } 
       </select> 
      </div> 
     ); 
     } 

    } 

    import React from 'react'; 
    import Combobox from '../components/Combobox'; 
    export default class Home extends React.Component { 
    submit(event){ 
      //how to get combobox (Select list) value here 
    } 
    render() { 
      var comboList = [{name: 'Self'},{name: 'Mother'}, 
       {name: 'Father'},{name: 'Domestic Partner'}]; 
      return (
       <div> 
        <div className="col-lg-10 col-md-10 col-sm-10 marginTop20"> 
        <form ref="form" onSubmit={this.submit.bind(this)} > 
         <div className="row"> 
          <Combobox combolist={comboList} /> 
         </div> 
     <div className="row"> 
          <input type="submit" value="submit" 
       className="btn btn-primary" /> 
         </div> 
    </form> 

Answer 1

あなたがレフリーを使用してそれを参照したい場合は、あなたの選択ボックスに名前を与える必要があります。

https://codepen.io/jzmmm/pen/AXaZPp?editors=0011

あなたのコンボボックス：

submit(event){ 
    event.preventDefault(); 
    console.log(this.refs.form.mySelect.value) 
    } 

Answer 2

：値、ご提出機能を取得するために、次に

<select name={this.props.name} className="form-control"> 

：あなたの選択のコンポーネントで

<Combobox name="mySelect" combolist={comboList} /> 

が名を追加

カスタムオプションPropTypeを追加することをお勧めします。これは、ユーザーが新しいオプションを選択するたびに呼び出されます。

まず、これをComboBoxに追加します。

ComboBox.propTypes = { 
    onOptionChange: React.PropTypes.func.isRequired 
} 

その後、optionがクリック可能にし、それが渡された関数を呼び出してみましょう。変更：

あなた ComboBoxこのように

<option key={i} value={item.name} onClick={(e) => this.props.onOptionChange(item)>{item.name}</option>

そしてもちろんパス機能のへ

<option key={i} value={item.name}>{item.name}</option>

：<ComboBox combolist={combolist} onOptionChange={this.onOptionChange.bind(this)} />

今すぐ対応するアイテムを含むごonOptionChange機能はなりますインボクユーザーがいずれかをクリックするたびに<option>が表示されます。 （もちろん、Homeのコンポーネントに実装する必要があります。