角度1.XのNG-オプション等価

Question

角度1.X反応し使用する各アイテムはオブジェクトされ、選択ドロップダウンで選択するためのng-optionsを有しています。普通のHTMLでは、オプションの値はの文字列にしかなりません。 Angularで1つのオプションを選択すると、実際に選択されたオブジェクトを見ることができますが、プレーンhtmlではその文字列値しか取得できません。

どのようにReact（+ Redux）に相当するのですか？

Answer 1

私は、選択反応要素の値にJSON.stringify/parseを使用しないで、値として選択肢オブジェクトの配列のインデックスを使用しません。

この例は、男性または女性の人の性別の単純な選択ドロップダウンです。それらの選択肢のそれぞれは、id、text、およびvalueプロパティを持つ実際のオブジェクトです。 Lodashは、内部の選択オブジェクトの配列に選択オブジェクトをルックアップするために使用されているMySelectと

import _ from 'lodash'; 
import React, { Component } from 'react'; 

class App extends Component { 
    state = { 
    selected: null 
    } 

    onGenderChange = (event, data) => { 
    // The value of the selected option 
    console.log(event.target.value); 
    // The object for the selected option 
    const selectedOption = _.find(data.options, { value: parseInt(event.target.value, 10) }); 
    console.log(selectedOption); 

    this.setState({ 
     selected: selectedOption 
    }); 
    } 

    render() { 
    const options = [ 
     { 
     id: 1, 
     text: 'male', 
     value: 123456 
     }, 
     { 
     id: 2, 
     text: 'female', 
     value: 654321 
     } 
    ]; 

    return (
     <div> 
     <label>Select a Gender:</label> 
     <MySelect 
      options={options} 
      selectedOption={this.state.selected} 
      onGenderChange={this.onGenderChange} 
     /> 
     </div> 
    ); 
    } 
} 

を使用しています

MySelectとコンポーネント

import React, { Component } from 'react'; 

class MySelect extends Component { 
    onGenderChange = (event) => { 
    // Add the second argument -- the data -- and pass it along 
    // to parent component's onChange function 
    const data = { options: this.props.options }; 
    this.props.onGenderChange(event, data); 
    } 

    render() { 
    const { options, selectedOption } = this.props; 

    // Goes through the array of option objects and create an <option> element for each 
    const selectOptions = options.map(
     option => <option key={option.id} value={option.value}>{option.text}</option> 
    ); 

    // Note that if the selectedOption is not given (i.e. is null), 
    // we assign a default value being the first option provided 
    return (
     <select 
     value={(selectedOption && selectedOption.value) || options[0].value} 
     onChange={this.onGenderChange} 
     > 
     {selectOptions} 
     </select> 
    ); 
    } 
} 

アプリケーションコンポーネント：ここでは、コードですAppコンポーネントのonGenderChangeの機能です。 MySelectコンポーネントに渡されるonChangeには2つの引数が必要であることに注意してください。選択オブジェクト（「オプション」）にアクセスするには追加のデータ引数が追加されます。これにより、選択したオプションの選択オブジェクトで状態を設定する（またはReduxを使用する場合はアクション作成者を呼び出す）ことができます。