ответить-выберите добавить все элементы из группы, нажав на название группы - PullRequest
Новая
       10

ответить-выберите добавить все элементы из группы, нажав на название группы

0 голосов
/ 21 апреля 2020

act-select 

let options = [
  {
    "label": "Group 1",
    "options": [
      {
        "label": "Item1", "value": "1|1"
      },
      {
        "label": "Item2", "value": "1|2"
      },
      {
        "label": "Item3", "value": "1|3"
      }
    ]
  },
  {
    "label": "Group n",
    "options": [
      {
        "label": "Item1", "value": "2|1"
      },
      {
        "label": "Item2", "value": "2|2"
      }
    ]
  }
];

 <Select
       onChange={this.onChange}
       closeMenuOnSelect={false}
       isMulti
       menuIsOpen={true}
       options={options}
  />

onChange запускается только для подэлементов группы, в документации я не нахожу свойство устанавливать кликабельный заголовок группы или другие параметры, которые бы свершившийся sh это, есть идеи?

Я также пытался добавить значение для таких групп 

[
  {
    "label": "Group 1",
    "value": [
      "1|1",
      "1|2",
      "1|3"
    ],
    "options": [
      {
        "label": "item1",
        "value": "1|1"
      },
      {
        "label": "item2",
        "value": "1|2"
      },
      {
        "label": "item3",
        "value": "1|3"
      }
    ]
  }
]

Но группа не активна

1 Ответ

1 голос
/ 21 апреля 2020

Да, так работает react-select, вы не можете напрямую щелкнуть / выбрать группу.

Однако, чтобы сделать группу кликабельной, укажите label и value в объекте внутри массива options.

Подобно этому 

let options = [
  {
    label: "---GROUP 1---",
    value: "1"
  },
  {
    options: [
      {
        label: "Item1",
        value: "1|1"
       ...

Это сделает группу интерактивной и выбираемой.

Рабочая копия вашего кода находится в codeandbox

Еще одна полезная информация:

Вы можете написать собственный компонент для группы. Таким образом, вы можете прикрепить onClick или сделать или другие вещи. 

<Select
        components={{GroupHeading: () => <div onClick={() => console.log('i am a group and i am clickable .. yay!')}>My Group Heading</div>}}
        onChange={onChange}

==== РЕДАКТИРОВАТЬ: на основе запроса в комментарии: ====

Чтобы выбрать все элементы группы после нажатия на метку группы, сделайте следующее:

  • поддержите состояние value, например
  • напишите небольшой пользовательский компонент для метку группы и прикрепите onClick, который объединит значение (состояние)
  • , использует value опору react-select и предоставит value из состояния
  • запись пользовательской onChange и обновите состояние, т.е. value после выбора элемента

Я обновил коды и рабочие поля копия кода (та же ссылка, что и выше)

Фрагмент кода: 

const group1Options = [
  {
    label: "Item1",
    value: "1|1"
  },
  {
    label: "Item2",
    value: "1|2"
  },
  {
    label: "Item3",
    value: "1|3"
  }
];

const group2Options = [
  {
    label: "Item1",
    value: "2|1"
  },
  {
    label: "Item2",
    value: "2|2"
  }
];

const createGroup = (groupName, options, setValue) => {
  return {
    label: (() => {
      return (
        <div
          onClick={() =>
            setValue(value =>
              value.concat(options.filter(grpOpt => !value.includes(grpOpt)))
            )
          }
        >
          {groupName}
        </div>
      );
    })(),
    options: options
  };
};

export default function App() {
  const [value, setValue] = useState([]);
  let options = [
    createGroup("---GROUP 1---", group1Options, setValue),
    createGroup("---GROUP 2---", group2Options, setValue)
  ];

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Select
        // components={{GroupHeading: () => <div onClick={() => console.log('i am a group and i am clickable .. yay!')}>My Group Heading</div>}}
        onChange={option => {
          console.log(option);
          return setValue(option);
        }}
        closeMenuOnSelect={false}
        isMulti
        menuIsOpen={true}
        options={options}
        value={value}
      />
    </div>
  );
}
...