typescript 我如何预填充一个react-select多下拉菜单

jhkqcmku 于 2023-03-24 发布在 TypeScript

关注(0)|答案(1)|浏览(126)

我有一个用于更新用户信息的模型。这个组件允许用户选择一个或多个俱乐部。因此，当他们打开更新模式，我想有他们的当前选择，这是在数据库中作为一个字符串值数组持久的下拉填充。这样，用户可以看到他们目前有什么，而不必重新选择选项，他们'我以前选择过。我当前的实现如下所示：

import Select, { ActionMeta, MultiValue } from "react-select";
import classNames from "classnames";
import { selectStyling } from "../../utilities/SelectStyling";

export interface Option {
  value: string;
  label: string;
}

interface Props {
  paddingTop?: string;
  paddingBottom?: string;
  title: string;
  options: Option[];
  placeholder: string;
  changeHandler: (newValue: Option[], actionMeta: ActionMeta<Option>) => void;
  initialValues?: string[];
}

const FormMultiSelectDropdown = ({paddingTop, paddingBottom, title, options, placeholder, changeHandler, initialValues}: Props) => {

  const handleChange = (newValue: Option[] | MultiValue<Option>, actionMeta: ActionMeta<Option>) => {
    changeHandler(newValue as Option[], actionMeta);
  }

  const values: Option[] = [];

  if(initialValues) {
    initialValues.forEach((value) => {
      values.push({value: value.toLowerCase(), label: value})
    }); 
  }

  return(
    <div className={classNames('flex', 'flex-col', 'px-10', paddingTop, paddingBottom, 'font-bold')} >
      <label className="text-lg font-bold mb-2 text-orange-400">{title}</label>
      <Select
        value={values}
        onChange={handleChange}
        placeholder = {placeholder}
        options={options}
        styles={selectStyling}
        isMulti
      />
    </div>
  );
}

export default FormMultiSelectDropdown;

注意：这应该是一个可重用的组件，因为我有另一个类似的实现与教练，用户可以选择 *

这个当前的实现几乎可以工作。下拉列表中预先填充了一个值数组，该数组是通过循环字符串数组并推到一个接受Option类型的数组而创建的，其中Option看起来像：

interface Option {
  value: string;
  label: string;
}

我面临的问题是，通过这种方式实现它，预先填充的值是不可删除的（即，当'x'被点击时，它们不会被删除）。此外，当我从下拉列表中选择一个新值时，它不会被添加到下拉列表中。

typescript

来源：https://stackoverflow.com/questions/75794305/how-do-i-pre-populate-a-react-select-multi-dropdown

1条答案

按热度按时间

jchrr9hc1#

我也遇到了同样的问题。我在multiselect组件外将initialValues作为字符串创建为Option[]。然后在我的自定义可重用select组件内，我使用react钩子useState和useEffect来创建和修改react-select的value属性。

export default function AppMultiSelect({
  onChange,
  options,
  value: valueProp,
}: AppMultiSelectProps) {
  const [value, setValue] = useState(valueProp)

  useEffect(() => {
    setValue(valueProp)
  }, [valueProp])

  return (
      <Select
        isClearable
        isMulti
        options={options}
        onChange={onChange}
        value={value}
      />
    </div>
  )
}

当我在代码中导入这个组件时：

//...
  // created initialOptions from my string array of pre-populated options
  const [selectedOptions, setSelectedOptions] = useState(initialOptions) 

  //...
  // in returned JSX:
        <AppMultiSelect
          options={options}
          value={selectedOptions}
          onChange={(newValue: readonly Option[]) => setSelectedOptions([...newValue])}
        />

赞(0）回复(0）举报 2023-03-24

我来回答

typescript 我如何预填充一个react-select多下拉菜单

1条答案

相关问题

热门标签

最新问答