Как выбрать несколько выпадающих значений в реагировать JS я использую `реагировать-выберите` - PullRequest
Новая
       12

Как выбрать несколько выпадающих значений в реагировать JS я использую `реагировать-выберите`

0 голосов
/ 08 ноября 2019

Я использую React-Select Но я получил ошибку

данные не могут быть выбраны несколько

Просмотр снимков экрана https://ibb.co/m9TKG5p

const [languageSelect, setLanguageSelect] = useState([]);

<Select
       closeMenuOnSelect={false}
       components={animatedComponents}
       isMulti
       options={returnSkills}
       name="SkillsSelect"
       onChange={skills => setSkillsSelect(skills)}
    />

Я пытался установить те же данные, получаемые из API, и установить значение

вроде -: 

let skilsSelect = data.get_skills_by_user;
      let skilsSelects = [];
      if (skilsSelect) {
        for(let i = 0; i < skilsSelect.length; i++){
          skilsSelects.push(skilsSelect[i].get_skills);
        }

        setSkillsSelect(skilsSelects);
      }



<Select
   closeMenuOnSelect={false}
   components={animatedComponents}
   isMulti
   options={returnSkills}
   name="SkillsSelect"
   value={SkillsSelect}
   onChange={skills => setSkillsSelect(skills)}
/>

, если у кого-то есть какое-либо решение, пожалуйста, сообщите мне.

1 Ответ

0 голосов
/ 08 ноября 2019

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

import React from "react";
    import { render } from "react-dom";
    import ReactDOM from "react-dom";
    import Select from "react-select";
    import "react-select/dist/react-select.css";

    class ReactSelect extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          itemtitle: "",
          multi: true,
          multiValue: [],
          options: [
            { value: "Color", label: "Yellow" },
            { value: "Fruit", label: "Apple" },
            { value: "Tool", label: "Spanner" }
          ]
        };
      }
      onTitleChange(e, value) {
        this.setState({ [e.target.name]: e.target.value });
        this.setState({ multiValue: e.target.value });
      }
      handleOnChange(value) {
        this.setState({ multiValue: value });
      }
      render() {
        return (
          <div>
            <input
              name="itemtitle"
              type="text"
              value={this.state.itemtitle}
              placeholder="Add new..."
              onChange={this.onTitleChange.bind(this)}
            />
            <Select.Creatable
              multi
              options={this.state.options}
              onChange={this.handleOnChange.bind(this)}
              value={this.state.multiValue}
              showNewOptionAtTop={false}
            />
          </div>
        );
      }
    }

    ReactDOM.render(<ReactSelect />, document.body);
...