React + Ant Design 中轻松获取 Select 组件选中项

2023-03-16 17:42:52

在 React 中使用 Select 组件获取选中数据

子标题 1：使用 onChange 事件监听器

React 和 Ant Design 中的 Select 组件提供了强大的功能，可让您轻松创建下拉选择控件。获取选中数据的最简单方法之一是使用 onChange 事件监听器。每当用户更改组件中的选择时，就会触发此事件。您可以利用此事件监听器来获取所选数据。

import { Select } from 'antd';

const App = () => {
  const handleChange = (value) => {
    console.log(`您选择了：${value}`);
  };

  return (
    <Select onChange={handleChange}>
      <Option value="jack">杰克</Option>
      <Option value="lucy">露西</Option>
      <Option value="tom">汤姆</Option>
    </Select>
  );
};

export default App;

在上面这段代码中，当用户更改 Select 组件中的选择时，就会调用 handleChange 函数。此函数打印出所选的值，让您轻松获取它。

子标题 2：使用 value 属性

value 属性提供了另一种获取选中数据的方便方法。它是一个受控属性，这意味着它的值是由父组件管理的。您可以使用 value 属性来设置和检索所选值。

import { Select } from 'antd';

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

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

  return (
    <Select value={value} onChange={handleChange}>
      <Option value="jack">杰克</Option>
      <Option value="lucy">露西</Option>
      <Option value="tom">汤姆</Option>
    </Select>
  );
};

export default App;

在这个示例中，我们使用 useState 钩子创建了一个名为 value 的 state 变量。value 属性被设置为 value state 变量的值。当用户更改 Select 组件中的选择时，handleChange 函数会被调用。此函数更新 value state 变量的值，使您可以跟踪所选数据。

子标题 3：使用 getPopupContainer 属性

getPopupContainer 属性可用于指定 Select 组件弹出框的容器。这在需要在模态窗口或其他弹出组件中使用 Select 组件时非常有用。

import { Select } from 'antd';

const App = () => {
  const getPopupContainer = () => {
    return document.getElementById('popup-container');
  };

  return (
    <div id="popup-container">
      <Select getPopupContainer={getPopupContainer}>
        <Option value="jack">杰克</Option>
        <Option value="lucy">露西</Option>
        <Option value="tom">汤姆</Option>
      </Select>
    </div>
  );
};

export default App;