Реагировать-выбрать сохранить реквизиты

Question

Я использую реагировать на выбор, чтобы включить множественный выбор в моем пользовательском интерфейсе.Тем не менее, мне нужно получить реквизиты от этой реакции-выбора, так как я отправляю выбранные значения в бэкэнд.Мне интересно.Как я могу сохранить значения состояния в массиве.Я сделал console.log, и я получил значения как

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

Однако мне просто хотелось бы иметь метку значения, так как я отправляю эти точные значения, например vanilla, на серверную часть.Какие-либо предложения.Большое спасибо.Ссылка 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