`response-select` динамически добавляет новое значение - PullRequest
Новая
       3

`response-select` динамически добавляет новое значение

0 голосов
/ 05 августа 2020

У меня есть компонент react-select Async. Ему назначено loadOptions, и он отлично работает при выборе options из этого списка.

Например, у меня есть список: 

[{value:"111", label:"3 x one"}, {value:"222", label:"3 x two}]

Я также хочу иметь возможность добавить options к этому компоненту динамически, например я хочу добавить {value: "333"}

Как я могу это сделать?

Спасибо: -)

Ответы [ 3 ]

1 голос
/ 05 августа 2020

options - это массив с параметрами, которые можно выбрать. value - это выбранное значение. Два отдельных. У вас может быть список options (скажем, [«a», «b»]), в то время как отображаемые значения будут разными (скажем, [«c», «d»]). Вы можете обновить параметры разными способами. Вы также можете захотеть управлять параметрами самостоятельно «извне», не используя defaultOptions + loadOptions (что, кстати, немного беспорядочно в v2, поскольку defaultOptions загружаются только при инициализации и не обновляются позже).

1 голос
/ 05 августа 2020

Вы можете использовать useState (не рекомендуется) 

const Example = () => {
  const [loadOptions, setLoadOptions] = useState([
    { value: '111', label: '3 x one' },
    { value: '222', label: '3 x two' }
  ])

  const handleClick = () => {
    setLoadOptions([...loadOptions, { value: '333', label: '3 x three' }])
  }

  return (
    <>
      <AsyncSelect 
        ...
        loadOptions={loadOptions} 
        ...
      />
      <Button onClick={handleClick}></Button>
    </>
  )
}

Для выбранных значений просто попробуйте манипулировать props value и onChange вручную ( docs )

Обновить коды и ссылка на ящик

Изменить код реакции и пример кода

0 голосов
/ 05 августа 2020 
import React, { useState } from "react";
import Select from "react-select";

function Example() {
  const [loadOptions] = useState([
    { value: "111", label: "3 x one" },
    { value: "222", label: "3 x two" }
  ]);

  const [optionSelectedList, setOptionSelectedList] = useState([]);

  const handleClick = () => {
    setOptionSelectedList([
      ...optionSelectedList,
      { value: "333", label: "3 x three" }
    ]);
  };

  return (
    <div>
      <Select
        options={loadOptions}
        onChange={setOptionSelectedList}
        isMulti
        value={optionSelectedList}
      />

      <button onClick={handleClick}>Add option</button>
    </div>
  );
}

export default Example;
...