ntdselect使用dropdownrender添加按钮点击确定渲染

如果你想在 Antd Select 组件中使用 dropdownRender 并且希望在点击确定按钮时触发下拉列表重新渲染，你可以使用以下方法：

1. 在 Select 组件中添加一个 state，用于保存用户选择的值和确定按钮是否被点击过的状态。

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

const { Option } = Select;

function MySelect() {
  const [selectedValue, setSelectedValue] = useState(null);
  const [okClicked, setOkClicked] = useState(false);

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

  const handleOkClick = () => {
    console.log('Selected value:', selectedValue);
    setOkClicked(true);
  };

  const dropdownRender = menu => (
    <div>
      {menu}
      <button onClick={handleOkClick}>OK</button>
    </div>
  );

  return (
    <Select
      defaultValue="Option 1"
      style={{ width: 120 }}
      value={selectedValue}
      onChange={handleSelectChange}
      dropdownRender={dropdownRender}
      open={okClicked} // 手动控制下拉列表的显示/隐藏状态
    >
      <Option key="1">Option 1</Option>
      <Option key="2">Option 2</Option>
      <Option key="3">Option 3</Option>
    </Select>
  );
}

2. 在 dropdownRender 函数中添加一个按钮，用于触发确定操作。

const dropdownRender = menu => (
  <div>
    {menu}
    <button onClick={handleOkClick}>OK</button>
  </div>
);

3. 在确定操作的回调函数中，使用保存的 state 值进行处理，并设置 okClicked 状态为 true。

const handleOkClick = () => {
  console.log('Selected value:', selectedValue);
  setOkClicked(true);
};

4. 在 Select 组件中添加一个 open 属性，并将其设置为 okClicked 的值。这将手动控制下拉列表的显示/隐藏状态。

<Select
  defaultValue="Option 1"
  style={{ width: 120 }}
  value={selectedValue}
  onChange={handleSelectChange}
  dropdownRender={dropdownRender}
  open={okClicked}
>
  <Option key="1">Option 1</Option>
  <Option key="2">Option 2</Option>
  <Option key="3">Option 3</Option>
</Select>

注意，在这个示例中，我们使用了 useState 钩子来保存用户选择的值和确定按钮是否被点击过的状态。在 handleSelectChange 函数中，我们更新了保存用户选择的值的 state。在 handleOkClick 函数中，我们使用保存的值进行处理，并设置 okClicked 状态为 true。在 Select 组件中，我们将 open 属性设置为 okClicked 的值，这将手动控制下拉列表的显示/隐藏状态。

最后，我们将 dropdownRender 函数传递给 Select 组件的 dropdownRender 属性中。这将覆盖默认的下拉列表渲染方式。