反应选择保存道具

Question

我正在使用react-select在我的UI上启用多个选择。 但是，我需要从反应选择中获取道具，因为我会将选择值发送到后端。 我想知道。 如何将状态值保存在数组中。 我做了一个console.log，我得到的值是

0: {value: "vanilla", label: "Vanilla"}
1: {value: "strawberry", label: "Strawberry"}
2: {value: "chocolate", label: "Chocolate"}.

但是，我只需要值标签，因为我会将例如vanilla的确切值发送到后端。 有什么建议么。 非常感谢。 react-select的github链接是：

    import React, { Component } from "react";
    import { connect } from "react-redux";
    import PropTypes from "prop-types";
    import checkboxes from "./checkboxes";
    import Checkbox from "./Checkbox";
    import Select from "react-select";
    const options = [
      { value: "chocolate", label: "Chocolate" },
      { value: "strawberry", label: "Strawberry" },
      { value: "vanilla", label: "Vanilla" }
    ];

    class CreatePreferences extends Component {
    state = {
    selectedOption: null
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        isMulti
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}
CreatePreferences.propTypes = {
  profile: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
  profile: state.profile
});

export default connect(mapStateToProps)(CreatePreferences);

Answer 1

要做的事情很少：您需要一个构造函数来定义状态，并且需要使用选定的值更新此状态。

在线沙盒演示

用构造函数定义状态，如...

  constructor(props) {
    super();
    this.state = {
      selectedOptions: [],
    };
  }

然后像这样定义事件处理程序。 （您要求保存“标签”，通常显示的是“标签”，保存的是“值”，但是无论如何都应要求...）...

  handleChange = selectedOption => {
    const state = this.state;
    state.selectedOptions = [];
    selectedOption.forEach((option) => {
      state.selectedOptions.push(option.label);
    });
    this.setState(state);
    console.log(`Options selected:`, JSON.stringify(state.selectedOptions, null, 4));
  };

在这里，您将看到这样的输出...

Options selected: [
    "Chocolate"
]
Options selected: [
    "Chocolate",
    "Strawberry"
]

通常，要使render()函数和状态协同工作要做很多事情，这在ReactJS中总是如此。

但是您似乎正在使用React-Select ，它似乎可以自动处理其中的一些问题： React-Select Github Page