使用具有多个输入的react select

Question

我有多个反应-选择输入，每个输入都有自己的单独选项数组。我遇到的问题是，我现在确定了如何正确地存储每个选择输入的输出。

我想使用这个选择输出POST到我的后端，但我不确定如何用一个处理程序函数来完成这一切。

这就是我到目前为止所做的，我有两段时间只从选择字段中输出适当的结果，但我似乎无法使其工作。

这是我拥有的代码沙盒：

https://codesandbox.io/s/busy-yonath-rlj9e?file=/src/App.js

Answer 1

在代码中，您使用useState((钩子，每次用户选择一个选项时，您都会将状态变量设置为所选值。问题是，每次运行setSelectOptions({ e })函数时，都会用值"e"覆盖现有数据。

您可以做的是：创建一个selectHandler函数，该函数接受2个参数(新值及其在状态变量中对应的值(

代码看起来像这样：

import "./styles.css";
import Select from "react-select";
import { useEffect, useState } from "react";
export default function App() {
const [selectOptions, setSelectOptions] = useState({
brand: "",
model: "",
color: "",
bodyType: "",
fuelType: "",
transmission: "",
location: ""
});
const brandOptions = [
{ value: "bmw", label: "Bmw" },
{ value: "audi", label: "Audi" },
{ value: "toyota", label: "Toyota" },
{ value: "nissan", label: "Nissan" }
];
const transmissionOptions = [
{ value: "automatic", label: "Automatic" },
{ value: "manual", label: "Manual" }
];
useEffect(() => console.log(selectOptions), [selectOptions])
const handleChange = (e, type) => {
setSelectOptions((previousState) => ({
...previousState, 
[type]: e.value,
}));
};
return (
<div className="App">
selected brand: {selectOptions.brand}
<br />
selected transmission:{selectOptions.transmission}
<div className="mb-2" style={{ width: "40%", margin: "0 auto" }}>
<Select
value={selectOptions.brand}
onChange={(e) => handleChange(e, "brand")}
placeholder="Select brand"
options={brandOptions}
/>
<Select
value={selectOptions.transmission}
onChange={(e) => handleChange(e, "transmission")}
placeholder="Select transmission"
options={transmissionOptions}
/>
</div>
</div>
);
}

作为一种解释，我在setSelectOptions((函数中所做的只是传递状态变量的先前值，并更新与select字段一致的值。

注意：将此代码插入到您的项目中，我运行了它，它起到了作用，所以请告诉我它是否有帮助！