React 多选框：轻松管理多项选择，提升用户体验

javascript

2024-03-19 19:11:16

React 多选框：管理多项选择

作为一名经验丰富的程序员和技术作家，我将在这篇文章中分享如何在 React 中实现多选框，帮助你管理多项选择，从而增强用户体验。

问题阐述

使用 React Select 组件时，你可能会遇到一个问题：默认情况下，它只能选择单个选项。当需要同时选择多个选项时，这可能会导致用户体验不佳。

解决方案

为了解决这个问题，我们需要对 Select 组件进行一些修改：

添加 mode="multiple" 属性以启用多选模式。
使用 e.target.value 检索所选选项的值。由于 e.target.value 返回一个数组，因此我们需要使用 map() 函数从数组中提取值。

更新后的代码如下：

<Select
  mode="multiple"
  onChange={(e) => {
    const selectedValues = e.target.value.map((item) => item.value);
    // 你的处理逻辑
  }}
>

代码示例

import { Select, Option } from 'antd';

const test = [{ id: 1, name: 'test1' }, { id: 2, name: 'test2' }, { id: 3, name: 'test3' }];

const MyComponent = () => {
  const handleChange = (e) => {
    const selectedValues = e.target.value.map((item) => item.id);
    console.log(selectedValues);
  };

  return (
    <Select
      showSearch
      style={{ width: 200 }}
      placeholder="Select a person"
      optionFilterProp="children"
      mode="multiple"
      onChange={handleChange}
    >
      {test.map((item) => (
        <Option key={item.id} value={item.id}>{item.name}</Option>
      ))}
    </Select>
  );
};