React 多选不能传递选中的数据，而是传递所有的数据

Question

我正在使用 @kenshooui/react-multi-select 的 react-multiselect，在 DOC 中，示例是一个基于类的组件，但我在我的 JS 代码中使用了基于函数的组件。多选代码是

 <MultiSelect

  items={form.states}

  selectedItems={form.selectedItems}

  onChange={handleChange} />

在这方面，我在函数 handleChange 中遇到了问题。我试图将函数从基于类更改为基于函数，但它不起作用文档中的函数是：

    this.setState({ selectedItems });

  }

在这个函数中selectedItems，所有在前端选择的项目都会改变状态。我用这个尝试的是：

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是一个返回的 setter 函数，useState它应该采用您的新状态。在您的情况下，您正在尝试将属性分配selectedItems给此函数：const handleChange = (selectedItems) => {&nbsp; setForm.selectedItems=selectedItems;};您应该改为使用更新后的状态调用该函数：const handleChange = selectedItems => {&nbsp; setForm({ ...form, selectedItems });};