как установить значение по идентификатору в реакции-выборе - PullRequest
Новая
       5

как установить значение по идентификатору в реакции-выборе

0 голосов
/ 28 мая 2020

Я использую response-select. У меня есть несколько response-select, которые изменяют значения внутри состояния с помощью handleChange. И, наконец, они где-то хранятся (для упрощения я написал response-select). Пока нет проблем. 

export const regionOptions = [
  { id: "1", value: "region 1", label: "region 1" },
  { id: "2", value: "region 2", label: "region 2" },
  { id: "3", value: "region 3", label: "region 3" },
  { id: "4", value: "region 4", label: "region 4" },
  { id: "5", value: "region 5", label: "region 5" },
  { id: "6", value: "region 6", label: "region 6" },
  { id: "7", value: "region 7", label: "region 7" },
  { id: "8", value: "region 8", label: "region 8" }
];

Чтобы отредактировать форму, я хочу установить response-select, но по ID. Например, если State.region = 2 response-select Результат = region2. совет: handleChange не следует изменять . Здесь вы можете увидеть мой код Песочница

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Я внес некоторые изменения в функцию рендеринга в вашем codeandbox. response-select принимает в качестве параметров массив пар значений и меток, поэтому вам необходимо преобразовать параметры региона в данные, которые response-select может правильно принимать. 

const tempOptions = regionOptions.map(option => ({
      value: option.id,
      label: option.label
    }));

Эта строка добавляется в функцию рендеринга.

0 голосов
/ 28 мая 2020

Вы можете попробовать этот пример: 

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import Select from "react-select";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedOption: ''
    };
  }

  options = [
    { id: "1", value: "Spring", label: "Spring" },
    { id: "2", value: "Summer", label: "Summer" },
    { id: "3", value: "Autumn", label: "Autumn" },
    { id: "4", value: "Winter", label: "Winter" }
  ];

  handleChange = selectedOption => {
    this.setState({ selectedOption });
  };

  render() {
    return (
      <div>
        <Select
          value={this.state.selectedOption}
          onChange={this.handleChange}
          options={this.options}
        />
        <button
          onClick={() => {
            let summer = this.options.find(o => o.id === "2");
            this.setState({ selectedOption: summer });
          }}
        >
          Set Summer
        </button>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));
...