React中如何为react-multi-select-component动态设置选中项

实现默认选中的方法 #

react-multi-select-component的选中值由绑定的value属性控制，格式和options的单条结构完全一致，是选中项对象组成的数组，你要设置默认选中直接给useState传入对应初始值即可。

你提到的默认选中第2、第3个选项，对应你给出的静态options数组里索引为1的Mango、索引为2的Strawberry，修改useState的初始参数即可，完整代码如下：

import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";
const Example = () => {
  const options = [
    { label: "Grapes", value: "grapes" },
    { label: "Mango", value: "mango" },
    { label: "Strawberry", value: "strawberry", disabled: true },
    { label: "Watermelon", value: "watermelon" },
    { label: "Pear", value: "pear" },
  ];
  // 仅修改这一行，传入默认选中的选项数组
  const [selected, setSelected] = useState([options[1], options[2]]);
  return (
    <div>
     <h1>Select Fruits</h1>
     <pre>{JSON.stringify(selected)}</pre>
     <MultiSelect
      options={options}
      value={selected}
      onChange={setSelected}
      labelledBy="Select"
     />
    </div>
  );
};

export default Example;

如果担心后续options顺序调整导致索引取值不准，也可以直接把匹配的选项对象传入初始值：

const [selected, setSelected] = useState([
  { label: "Mango", value: "mango" }, 
  { label: "Strawberry", value: "strawberry", disabled: true }
]);

动态修改选中项的场景

如果你的options是从接口动态获取的，或者需要在后续交互中修改选中项，直接调用setSelected传入对应选中数组即可，比如加载完接口数据后默认选中指定value的选项：

import React, { useState, useEffect } from "react";
import MultiSelect from "react-multi-select-component";
const Example = () => {
  const [options, setOptions] = useState([]);
  const [selected, setSelected] = useState([]);

  // 模拟接口请求获取options
  useEffect(() => {
    const fetchOptions = async () => {
      const res = await fetch('/api/fruit-options')
      const data = await res.json()
      setOptions(data)
      // 拿到选项后设置默认选中value为mango、strawberry的项
      const defaultSelected = data.filter(item => ['mango', 'strawberry'].includes(item.value))
      setSelected(defaultSelected)
    }
    fetchOptions()
  }, [])

  return (
    <div>
     <h1>Select Fruits</h1>
     <pre>{JSON.stringify(selected)}</pre>
     <MultiSelect
      options={options}
      value={selected}
      onChange={setSelected}
      labelledBy="Select"
     />
    </div>
  );
};

export default Example;

内容的提问来源于stack exchange，提问作者Kodali444