ANTD 如何实现两个Select框联动效果需要配置啥属性

要实现两个 Select 框的联动效果，需要在父组件中监听第一个 Select 框的选中值，并将该值作为 props 传递给第二个 Select 组件。在第二个 Select 组件中，可以通过使用 `value` 和 `onChange` 属性来实现联动效果。

具体实现方式如下：

1. 在父组件中，监听第一个 Select 的选中值，并将该值作为 props 传递给第二个 Select 组件：

import { useState } from 'react';
import { Select } from 'antd';

const { Option } = Select;

function ParentComponent() {
  const [selectedValue, setSelectedValue] = useState(null);

  const handleFirstSelectChange = (value) => {
    setSelectedValue(value);
  };

  return (
    <div>
      <Select onChange={handleFirstSelectChange}>
        <Option value="option1">Option 1</Option>
        <Option value="option2">Option 2</Option>
        <Option value="option3">Option 3</Option>
      </Select>
      <Select value={selectedValue}>
        <Option value="sub-option1">Sub Option 1</Option>
        <Option value="sub-option2">Sub Option 2</Option>
        <Option value="sub-option3">Sub Option 3</Option>
      </Select>
    </div>
  );
}

2. 在第二个 Select 组件中，通过使用 `value` 和 `onChange` 属性来实现联动效果：

function ParentComponent() {
  const [selectedValue, setSelectedValue] = useState(null);

  const handleFirstSelectChange = (value) => {
    setSelectedValue(value);
  };

  return (
    <div>
      <Select onChange={handleFirstSelectChange}>
        <Option value="option1">Option 1</Option>
        <Option value="option2">Option 2</Option>
        <Option value="option3">Option 3</Option>
      </Select>
      <Select value={selectedValue} onChange={setSelectedValue}>
        <Option value="sub-option1">Sub Option 1</Option>
        <Option value="sub-option2">Sub Option 2</Option>
        <Option value="sub-option3">Sub Option 3</Option>
      </Select>
    </div>
  );
}

需要注意的是，第二个 Select 组件中的 `value` 属性需要绑定父组件中的 `selectedValue` 状态，并在选中项发生变化时，通过 `onChange` 属性将新值传递回父组件中，以便监听第一个 Select 框的变化。