使用React的Angular 1.X ng-options等效 [英] Angular 1.X ng-options equivalent using React

问题描述

Angular 1.X具有 ng-options 对象.在纯HTML中，选项的值只能是 string .当您在Angular中选择一个选项时，您可以看到实际选择的对象，而在纯HTML中，您只能获取该字符串值.

Angular 1.X has ng-options for the choices in a select dropdown, each item being an object. In plain HTML, the value of an option can only be a string. When you select one option in Angular, you can see the actual selected object while in plain html, you can only get that string value.

您如何做到与React(+ Redux)中的等效?

How do you do the equivalent of that in React (+Redux)?

推荐答案

我想出了一个不使用JSON.stringify/parse作为select React元素的值的解决方案，也没有使用该数组的索引选择对象作为值.

I came up with a solution that does not use JSON.stringify / parse for the value of the select React element nor does it use the index of the array of choice objects as the value.

该示例是针对一个人的性别(男性或女性)的简单选择下拉列表.这些选择中的每一个都是具有id，text和value属性的实际对象.这是代码:

The example is a simple select dropdown for a person's gender -- either male or female. Each of those choices is an actual object with id, text, and value properties. Here is the code:

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

使用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用于在App组件的 onGenderChange 函数内的选择对象数组中查找选择对象.请注意，传递给 MySelect 组件的onChange需要两个参数-添加了一个额外的数据参数，以便能够访问选择对象(选项").这样，您就可以使用所选对象的选择对象设置状态(如果使用Redux，则可以调用操作创建者).

Lodash is used to look up the choice object in the array of choice objects inside the onGenderChange function in the App component. Note that the onChange passed to the MySelect component requires two arguments -- an extra data argument is added in order to be able to access the choice objects ("options"). With that, you can just set the state (or call an action creator if using Redux) with the choice object for the selected option.

这篇关于使用React的Angular 1.X ng-options等效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！