React multi-select 无法传递 selected 数据，而是传递所有数据

Question

我正在使用 @kenshooui/react-multi-select 的 react-multiselect，在文档中，示例是基于 class 的组件，但我在我的 JS 代码中使用基于函数. multi-select 的代码是

 <MultiSelect
  items={form.states}
  selectedItems={form.selectedItems}
  onChange={handleChange} />

我在函数 handleChange 中遇到了问题。我试图将功能从 class based 更改为 function based 但它不起作用文档中的函数是：

    this.setState({ selectedItems });
  }

在此函数中，selectedItems 的状态随着在前端 select 编辑的所有项目而改变。我尝试过的是：

const handleChange = (selectedItems)=> {
        setForm.selectedItems=selectedItems;
        console.log(selectedItems, "selectedItemsssssss");

    };

同时我还有一个 handleInputChange 函数：

const handleInputChange = (event) => {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        setForm({
            ...form,
            [name]: value,

        });
    };

请帮我解决这个问题。如何更改 selectedItems 的状态并将数据发送到后端。我是新来的反应。

Answer 1

setForm 是从 useState 返回的 setter 函数，它应该采用您的新状态。在您的情况下，您正在尝试将属性 selectedItems 分配给此函数：

const handleChange = (selectedItems) => {
  setForm.selectedItems=selectedItems;
};

您应该改为使用更新后的状态调用该函数：

const handleChange = selectedItems => {
  setForm({ ...form, selectedItems });
};

Codesandbox

React multi-select 无法传递 selected 数据，而是传递所有数据

React multi-select cannot pass selected data, Instead passing all the data

javascript

multi-select

reactjs

react-redux