如何在 React 中正确更新<选择多个...>？

Question

在react应用程序中，您应该控制一个<select>。这真的很容易，只需一个选择：

const ExampleSelect = () => {
const [value, setValue] = React.useState()
return (
<select
value={value}
onChange={(e) => setValue(e.currentTarget.value)}
>
<option value='foo'>Foo</option>
<option value='bar'>Bar</option>
<option value='baz'>Baz</option>
</select>
)
}

但是，当您将multiple道具添加到<select>时，事情会变得奇怪。传递给onChange的函数遍历选项并根据具有option.selected === true的选项采取行动，这些函数似乎只能在桌面上工作——在iOS上的Safari中，具有multiple === true的select似乎无法控制。

我觉得这是一个非常基本的问题，但我找不到任何东西。我不想安装一个带有预设组件的整个库，只是为了能够在react应用程序中的<select>中选择多个选项。

以下是我尝试过的一些onChange功能：

type Setter = React.Dispatch<React.SetStateAction<string[] | undefined>>
type SelectChange = React.ChangeEvent<HTMLSelectElement>
export const handleMultiSelectChange = <S extends Function = Setter>(
value: string[] | undefined, setter: S
) => (
e: SelectChange
): void => {
const v = e.currentTarget.value
if (value && value.length > 0) {
const index = value.indexOf(v)
if (index >= 0) {
const newValue = value.filter((opt) => opt !== v)
setter(newValue)
} else {
setter([...value, v])
}
} else {
setter([v])
}
}

type Setter = React.Dispatch<React.SetStateAction<string[] | undefined>>
type SelectChange = React.ChangeEvent<HTMLSelectElement>
export const handleChangeMultiple = <S extends Function = Setter>(
value: string[] | undefined = [], setter: S
) => (
event: SelectChange
): void => {
const {options} = event.currentTarget
for (let i = 0, l = options.length; i < l; i += 1) {
const option = options[i]
if (option.selected) {
alert(value.includes(option.value))
if (value.includes(option.value)) {
const index = value.indexOf(option.value)
value.splice(index, 1)
} else {
value.push(option.value)
}
}
}
setter(value)
}

(这些是这样使用的：(

const ExampleSelect = () => {
const [value, setValue] = React.useState()
return (
<select
multiple
value={value}
onChange={handleChangeMultiple(value, setValue)}
>
<option value='foo'>Foo</option>
<option value='bar'>Bar</option>
<option value='baz'>Baz</option>
</select>
)
}

(尽管这对我来说不正确(

Answer 1

对于select，e.target为您提供options数组，您可以循环通过它获得selected选项。使用map获取实际值并将其存储在您的状态中。

选择

<select
onChange={handleChangeNormalSelect}
multiple
value={val}
options={options}
>
{options.map(item => {
return <option value={item.value}>{item.label}</option>;
})}
</select>

onChange

...
const [val, setVal] = useState([]);
...
const handleChangeNormalSelect = e => {
const updatedOptions = [...e.target.options]
.filter(option => option.selected)
.map(x => x.value);
console.log("updatedOptions", updatedOptions);
setVal(updatedOptions);
};
...

工作代码示例(html多选(在这里