【React】Antd Select选择器多选设置最多只能选3个

qing_小诺

已于 2023-01-13 17:12:52 修改

阅读量3.4k

点赞数 2

分类专栏： ReactJs 文章标签： react.js javascript

于 2023-01-13 15:58:35 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33237207/article/details/128675282

版权

ReactJs 专栏收录该内容

21 篇文章

订阅专栏

文章介绍了在AntDesign(Antd)3X和4X版本中，如何限制Select组件在多选模式下最多只能选择3个选项的三种方法。方案1使用`setFieldsValue`在4X版本有效，3X版本无效；方案2利用`pop()`方法动态移除超出的选项；方案3通过`validator`在rules中进行验证并控制选择项数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用场景描述：Antd3X版本，想要实现form中的 Select 多选最多只能选3个。

1、方案1：setFieldsValue（适用Antd4X版本）

起初是想在Select的onchange事件中判断values的数量，数量大于三个的时候来重新setFieldsValue。

后来发现在Antd3X版本中 setFieldsValue方法不起作用，Select的值还是会一直增加。

但是试了Antd4X版本，这种方案是可行的，代码如下：

import { Form, message, Select } from 'antd';
import React from 'react';
import _ from 'lodash'

const { Option } = Select;

const App = () => {
  const [form] = Form.useForm();

  const handleChange = (value) => {
    if (value.length > 3) {
      message.error('已超过最大数量');
      form.setFieldsValue({
        "list": _.take(value, 3),
      })
    }
  };

  return (
    <Form form={form}>
      <Form.Item
        name="list"
        label="多选：（最多选3个）"
        rules={[{
          required: true
        }]}
      >
        <Select
          mode="multiple"
          placeholder="请选择"
          onChange={handleChange}
        >
          <Option value="111">111</Option>
          <Option value="222">222</Option>
          <Option value="333">333</Option>
          <Option value="444">444</Option>
        </Select>
      </Form.Item>
    </Form>
  );
};

export default App;

2、方案2：pop（适用Antd3X、4X版本）

再后来看到这个文章：https://blog.youkuaiyun.com/m0_45219210/article/details/128573600

亲测好用，方法如下：就是在 onChange 事件中判断选中值的数量，如果大于3，则调用 pop() 方法。

代码如下：

const handleChange = (value) => {
  if (value.length > 3) {
    message.error('已超过最大数量');
    value.pop();
  }
};

3、方案3：validator（适用Antd3X版本）

参考文章：https://www.bbsmax.com/A/q4zVEqDGdK/

把Select标签上的onChange去掉，然后在 rules 中添加 validator 【它是自定义校验（3X版本中注意，callback 必须被调用，4X版本略有不同）】

代码如下：

import { Form, message, Select } from 'antd';
import React from 'react';
import _ from 'lodash'

const { Option } = Select;

const App = () => {
  const [form] = Form.useForm();

  const handleChange = (rule, value, callback) => {
    if (value.length > 3) {
      message.error('已超过最大数量');
      form.setFieldsValue({
        "list": _.take(value, 3),
      })
      callback('已超过最大数量...')
    } else {
      callback()
    }
  };


  return (
    <Form form={form}>
      <Form.Item
        name="list"
        label="多选：（最多选3个）"
        rules={[{
          required: true,
          validator: handleChange
        }]}
      >
        <Select
          mode="multiple"
          placeholder="请选择"
        >
          <Option value="111">111</Option>
          <Option value="222">222</Option>
          <Option value="333">333</Option>
          <Option value="444">444</Option>
        </Select>
      </Form.Item>
    </Form>
  );
};

export default App;