角1.X納克選項使用陣營

Question

角1.X具有ng-options用於在選擇下拉菜單中選擇，每一個項目作爲一個對象。在純HTML，一個選項的值只能是串。當您在Angular中選擇一個選項時，您可以在純html中看到實際選定的對象，只能獲取該字符串值。

你如何做React（+ Redux）中的等價物？

Answer 1

我想出了一個解決方案，它不使用JSON.stringify/parse作爲選擇React元素的值，也不使用選擇對象數組的索引作爲值。

的例子是一個人的性別簡單的選擇下拉列表 - 無論是男性還是女性。每個選項都是具有id，text和value屬性的實際對象。下面是代碼：

MySelect部件使用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> 
    ); 
    } 
} 

應用組件

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> 
    ); 
    } 
} 

Lodash被用於查找的選擇對象的陣列中的裏面選擇對象App組件中的onGenderChange函數。注意的onChange傳遞給MySelect組件需要兩個參數 - 一個額外的數據參數，以便能夠訪問選擇的對象（「選擇」）補充道。就這樣，你可以設置狀態（或者，如果使用Redux的調用行動的創建者）與所選擇的選項的選擇對象。