Угловой 1.X нг опции-эквивалент с помощью React

Question

Угловой 1.X имеет ng-options для выбора в раскрывающемся списке выбери, каждый элемент, представляющий собой объекта. В простом HTML значение параметра может быть только строка. Когда вы выбираете одну опцию в Angular, вы можете видеть фактический выбранный объект в обычном html, вы можете получить только это строковое значение.

Как вы выполняете эквивалент этого в реактиве (+ Redux)?

Answer 1

Я придумал решение, которое не использует JSON.stringify/parse для значения элемента Select React и не использует индекс массива объектов выбора в качестве значения.

Примером является простое раскрывающееся меню для пола человека - мужчины или женщины. Каждый из этих вариантов является фактическим объектом с идентификационными, текстовыми и значениями. Вот код:

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 компонент, который использует 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> 
    ); 
    } 
} 

Lodash используется для просмотра объекта выбора в массиве выбор объектов внутри функция onGenderChange в компоненте приложения. Обратите внимание, что для параметра onChange, переданного компоненту MySelect, требуются два аргумента - добавляется дополнительный аргумент данных, чтобы иметь доступ к объектам выбора («параметры»). При этом вы можете просто установить состояние (или вызвать создателя действия при использовании Redux) с объектом выбора для выбранного параметра.