Есть ли способ сгруппировать параметры в Input в реагировать на выбор? - PullRequest
Новая
       5

Есть ли способ сгруппировать параметры в Input в реагировать на выбор?

0 голосов
/ 06 февраля 2020

Я использую act-select .

. Мне нужно сгруппировать параметры на входе. Следующие значения должны быть добавлены в указанную группу c точно так же, как в компоненте "MenuList" с группами

вот что мне нужно

https://prnt.sc/qybffp

Идеи о том, как это сделать?

Пока у меня есть только одна идея по поводу компонента Multivalue (каждая группа является отдельным многозначным компонентом). Но не уверен, что это хорошая идея)

Ответы [ 2 ]

0 голосов
/ 07 февраля 2020

Я не уверен, если вы хотите достичь чего-то подобного. 

const selected_options = [{
    label: "Dark Colours",
    options: [{
        label: "colour 1",
        value: "value1"
      },
      {
        label: "colour 2",
        value: "value2"
      }
    ]
  },
  {
    label: "Light Colours",
    options: [{
        label: "colour 3",
        value: "value3"
      },
      {
        label: "colour 4",
        value: "value4"
      }
    ]
  },
];
0 голосов
/ 06 февраля 2020

Вот как вы можете использовать react-select. 

npm i react-select

Пример приложения. 

export default class App extends React.Component {
  state = {
    selectedOption: null
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };
  render() {
    const { selectedOption } = this.state;
    return (
      <div>
        <Select
          onChange={this.handleChange}
          defaultValue={[selectedOption]}
          isMulti
          name="colors"
          options={options}
          className="basic-multi-select"
          classNamePrefix="select"
        />
      </div>
    );
  }
}

json data 

const data = [
  {
    userSkills: [
      {
        _id: "1",
        skillName: "React"
      },
      {
        _id: "2",
        skillName: "Php"
      },
      {
        _id: "3",
        skillName: "ExpressJS"
      },
      {
        _id: "4",
        skillName: "Nodejs"
      },
      {
        _id: "5",
        skillName: "Java"
      }
    ]
  }
];
let options = data[0].userSkills.map(skill =>
  skill
    ? {
        value: skill.skillName,
        label: skill.skillName.toUpperCase()
      }
    : skill
);

Рабочий пример - Демонстрационная версия

...