如何在ProFormSelect组件的onChange事件中获取选中选项的value与label

嘿，这个问题我之前也碰到过！ProFormSelect默认的onChange确实只返回选中的value，但有两种简单的方法能同时拿到对应的label，我给你详细说说：

方法一：通过选项数组匹配对应的label #

把选项列表单独抽出来复用，在onChange触发时，用选中的value去数组里找到对应的选项，就能拿到label了：

import { useState } from 'react';
import { ProFormSelect } from '@ant-design/pro-components';

const YourComponent = () => {
  const [taskId, setTaskId] = useState();
  const [taskLabel, setTaskLabel] = useState();

  // 单独定义选项数组，方便后续匹配
  const taskOptions = [
    { value: "1", label: "A" },
    { value: "2", label: "B" },
  ];

  return (
    <ProFormSelect
      onChange={(value) => {
        setTaskId(value);
        // 根据value找到对应的选项
        const selectedOption = taskOptions.find(item => item.value === value);
        if (selectedOption) {
          setTaskLabel(selectedOption.label);
        }
      }}
      name="task"
      label="Task"
      options={taskOptions}
    />
  );
};

export default YourComponent;

方法二：利用fieldProps传递原生Select的回调 #

ProFormSelect是基于Ant Design的Select组件封装的，我们可以通过fieldProps传递原生Select的onChange方法，这个方法的第二个参数就是选中的完整option对象，直接就能拿到label：

import { useState } from 'react';
import { ProFormSelect } from '@ant-design/pro-components';

const YourComponent = () => {
  const [taskId, setTaskId] = useState();
  const [taskLabel, setTaskLabel] = useState();

  return (
    <ProFormSelect
      fieldProps={{
        onChange: (value, option) => {
          setTaskId(value);
          // 直接从option中获取label
          setTaskLabel(option.label);
        }
      }}
      name="task"
      label="Task"
      options={[
        { value: "1", label: "A" },
        { value: "2", label: "B" },
      ]}
    />
  );
};

export default YourComponent;

两种方法各有适用场景：方法一适合选项固定的静态场景，方法二更灵活，尤其是当选项是动态生成的时候，直接拿option对象会更可靠哦！

备注：内容来源于stack exchange，提问作者Andish