时间戳

首页 > 解决方案 > 如何在reactjs中的react-multi-select-component中设置动态选择项

reactjs - 如何在reactjs中的react-multi-select-component中设置动态选择项

问题描述

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([]);
return (
  <div>
   <h1>Select Fruits</h1>
   <pre>{JSON.stringify(selected)}</pre>
   <MultiSelect
    options={options}
    value={selected}
    onChange={setSelected}
    labelledBy="Select"
   />
  </div>
 );
};

export default Example;

这段代码工作正常。但我不知道如何动态检查项目。如果我愿意，我应该如何传递 2 和 3 选项的检查值。预先感谢

标签： reactjs

解决方案

如果您希望列表使用预先选择的项目进行初始化，则需要正确传递 selected 道具。当前，您传递一个空数组。尝试这个：


import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";
const App = () => {
    const options = [
          { label: "Grapes", value: "grapes" },
          { label: "Mango", value: "mango" },
          { label: "Strawberry", value: "strawberry", disabled: true},
          { label: "Watermelon", value: "watermelon" },
          { label: "Pear", value: "pear" },
        ];
  // preset some selected values for first render
  const [selected, setSelected] = useState(options.slice(0,2)); 
  
  return (
      <div>
           <h1>Select Fruits</h1>
           <pre>{JSON.stringify(selected)}</pre>
           <MultiSelect
                 options={options}
                 value={selected}
                 onChange={setSelected}
                 labelledBy="Select"
                />
          </div>
     );
};

export default App;

推荐阅读