反应打字稿设置默认值多选

发布于 2025-01-09 06:32:30 字数 489 浏览 4 评论 0原文

我正在使用此模块

import { MultiSelect } from "react-multi-select-component"

并通过此创建表单

const [selected_to2, setSelected_to2] = useState([]);

<MultiSelect
options={options2}
value={selected_to}
onChange={setSelected_to}
labelledBy="Select2"
/>

，然后我使用此模块创建具有默认值的多选组件

  selected_to2.push({
    value: item?.Code,
    label: item?.Name
  })

，但在多选表单中调用 4 次返回值，是否有任何正确的方法来设置多选的默认值，然后还在多选项中添加和删除？

原文

I am using this module

import { MultiSelect } from "react-multi-select-component"

and creating form by this

const [selected_to2, setSelected_to2] = useState([]);

<MultiSelect
options={options2}
value={selected_to}
onChange={setSelected_to}
labelledBy="Select2"
/>

then I creating multiselect component with default value using this

  selected_to2.push({
    value: item?.Code,
    label: item?.Name
  })

but returning value with 4 time called in the multiselect form, any proper way to set default value of multiselect then also add and remove in multiselect item?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尘曦 2025-01-16 06:32:30

React 状态必须通过 set 函数更新。直接编辑该值是行不通的。

所以你需要做

setSelected_to2(s => [...s, {
    value: item?.Code,
    label: item?.Name
}])

React state must updated by set function. Edit the value directly will not work.

So you need do

setSelected_to2(s => [...s, {
    value: item?.Code,
    label: item?.Name
}])

回复收藏 0 原文

木槿暧夏七纪年 2025-01-16 06:32:30

首先，您更新状态的方式是错误的方式

错误的方式

 selected_to2.push({
    value: item?.Code,
    label: item?.Name
  })

正确的方式：

setSelected_to2([{
    value: item?.Code,
    label: item?.Name
  }
])

这是我所做的一个快速示例可能会对您有所帮助，请记住您的默认值必须是选定值的数组，因为它是多选组件。
JSX

import { useState } from "react";
import { MultiSelect } from "react-multi-select-component";
import "./App.css";
const options = [
  { label: "The Godfather", value: 1 },
  { label: "Pulp Fiction", value: 2 },
];
const App = ({ editMode = true }) => {
  const [value, setValue] = useState(editMode ? [options[1]] : []);
  return (
    <div className="App">
      <MultiSelect
        options={options}
        value={value}
        onChange={(selectedValues) => setValue(selectedValues)}
        labelledBy="Select2"
      />
    </div>
  );
};
export default App;

First of all you are updating state is a wrong way

Wrong way

 selected_to2.push({
    value: item?.Code,
    label: item?.Name
  })

Right way:

setSelected_to2([{
    value: item?.Code,
    label: item?.Name
  }
])

Here's a quick example that I did might help you, remember your default value must be an array of selected values since it's a multiselect component.
JSX

import { useState } from "react";
import { MultiSelect } from "react-multi-select-component";
import "./App.css";
const options = [
  { label: "The Godfather", value: 1 },
  { label: "Pulp Fiction", value: 2 },
];
const App = ({ editMode = true }) => {
  const [value, setValue] = useState(editMode ? [options[1]] : []);
  return (
    <div className="App">
      <MultiSelect
        options={options}
        value={value}
        onChange={(selectedValues) => setValue(selectedValues)}
        labelledBy="Select2"
      />
    </div>
  );
};
export default App;

回复收藏 0 原文

~没有更多了~