React：DOMノードの選択フィールドから値を取得

Question

私は初心者のバックエンド開発者であり、機能を修正することを任されており、反応部分に固執しています。私は選択されたコンポーネントから値を取得するための適切な構文を見つけることができないようで、それはかなり多くの問題です。私は他の多くの投稿や反応文書を見てきましたが、私が試しているものは何も働いていません。次のようなマークアップの例は、（このビューで選択フィールドの多くがあります）です。

<div className="grid-content noscroll medium-6 small-12" style={{overflow: 'visible'}}> 
     <div className="grid-content"><label>Program</label></div> 
     <div className="grid-content" style={{overflow: 'visible'}}> 
     <Select 
      key="program_key" 
      ref="program_key" 
      multi={false} 
      value={ jobData && jobData.program_key ? jobData.program_key : null} 
      options={programOptions} 
      onChange={this.changeField.bind(null, 'program_key')} 
      /> 
     </div> 
    </div> 

次のように続いて、イベントハンドラは次のとおりです。

changeField: function(propName) { 
    var field = this.refs[propName].getDOMNode(); 
    console.log(field.input); 
    console.log(field); 
    var nextProp = field.value.length > 0 ? field.value : null; 
    var job = Object.assign({}, this.state.job); 
    job.payload.data[propName] = nextProp; 

    if(propName === 'user_id') { 
    this.changeUserId = true 
    } 

    this.setState({ 
    job: job, 
    updated: false 
    }); 
} 

にconsole.log（フィールド）の結果であります：

<div class="Select is-searchable has-value" data-reactid=".0.0.2.0.1.0.1.1.0.1.1.$program_key"> 
<input type="hidden" value="NHDS" data-reactid=".0.0.2.0.1.0.1.1.0.1.1.$program_key.0"> 

それはそこから行くが、「の値= 『NHDSは』」私は必要な部分であると私は私の人生のためにそれを取得する方法を見つけ出すことはできません。この質問を明確にしたり改善したりできるかどうか教えてください。前もって感謝します。

Answer 1

サンプルコードに基づいて、反応選択コンポーネントhttps://github.com/JedWatson/react-selectを使用しているようです。 onChangeは、変更された新しい値をその支柱として起動します。あなたの場合、changeFieldメソッドには、関数の最初のパラメータとして注入されるバインドされたパラメータ（ 'program_key'）があります。次のパラメータは選択された値でなければなりません。これをテストするには、changeField関数内でconsole.log(arguments)を実行することができます。これは、 'program_key'と新しい値の配列を返します。その場合は、changeFieldに新しいパラメータを追加して、newValueという名前を付けて、必要な場所で使用してください。

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind https://github.com/JedWatson/react-select#further-options