Ant Design级联选择器如何只选中某一级并且输入框内只显示这一级

在 Ant Design 的级联选择器中，如果想只选中某一级并且输入框内只显示这一级，可以通过设置 `changeOnSelect` 属性为 `true` 来实现。当 `changeOnSelect` 为 `true` 时，选择一个父级选项就会立即触发 `onChange` 事件并更新子级选项，而且输入框内只显示当前选中的这一级。

以下是一个简单的例子，展示了如何只选中某一级并且输入框内只显示这一级：

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

const options = [
  {
    value: 'fruit',
    label: 'Fruit',
    children: [
      {
        value: 'apple',
        label: 'Apple',
        children: [
          {
            value: 'fuji',
            label: 'Fuji Apple',
          },
          {
            value: 'honeycrisp',
            label: 'Honeycrisp Apple',
          },
        ],
      },
      {
        value: 'orange',
        label: 'Orange',
      },
    ],
  },
  {
    value: 'vegetable',
    label: 'Vegetable',
    children: [
      {
        value: 'carrot',
        label: 'Carrot',
      },
      {
        value: 'broccoli',
        label: 'Broccoli',
      },
    ],
  },
];

const App = () => {
  const [selectedValue, setSelectedValue] = useState([]);

  const handleCascaderChange = (value, selectedOptions) => {
    setSelectedValue(value);
  };

  return (
    <div>
      <Cascader
        options={options}
        changeOnSelect={true}
        value={selectedValue}
        onChange={handleCascaderChange}
        placeholder="Please select"
      />
    </div>
  );
};

export default App;

在上面的例子中，我们设置了 `changeOnSelect` 属性为 `true`，并在 `onChange` 事件中更新了 `selectedValue` 状态。这样，在选择一个父级选项时，就会立即触发 `onChange` 事件并更新子级选项，而且输入框内只显示当前选中的这一级。