React + Ant Design 3.x 实战 Cascader 多选功能

2024-01-18 13:59:36

Ant Design 3.x：解锁 Cascader 多选功能

手写多选：发挥创造力

要赋予 Cascader 多选功能，最直接的方法是编写自定义代码。通过使用受控组件，你可以定义一个状态数组来保存已选值，并在组件的 onChange 处理程序中更新该数组。最后，在 value 属性中设置该数组，轻松实现值的变化跟踪。

import React, { useState } from 'react';
import { Cascader } from 'antd';

const options = [
  // ...
];

const App = () => {
  const [value, setValue] = useState([]);

  const onChange = (value) => {
    setValue(value);
  };

  return (
    <Cascader options={options} value={value} onChange={onChange} />
  );
};

export default App;

模糊搜索：简化选择

Ant Design 3.x 提供了内置的模糊搜索功能，为多选带来了便捷。启用该功能后，用户可通过输入关键词过滤选项，快速定位所需值。

import React, { useState } from 'react';
import { Cascader } from 'antd';

const options = [
  // ...
];

const App = () => {
  const [value, setValue] = useState([]);

  const onChange = (value) => {
    setValue(value);
  };

  const filter = (inputValue, path) => {
    // ...
  };

  return (
    <Cascader options={options} value={value} onChange={onChange} showSearch filter={filter} />
  );
};

export default App;

正常功能：简化操作

Ant Design 3.x 还提供了其他特性来增强多选体验。changeOnSelect 属性允许你控制是否在选择时触发 onChange 事件，提供更细粒度的控制。

import React, { useState } from 'react';
import { Cascader } from 'antd';

const options = [
  // ...
];

const App = () => {
  const [value, setValue] = useState([]);

  const onChange = (value) => {
    setValue(value);
  };

  return (
    <Cascader options={options} value={value} onChange={onChange} changeOnSelect />
  );
};

export default App;