ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.04k stars 1.29k forks source link

🐛[BUG] ProFormSelect 在设置labelInValue为true,且设置mode为tags时,存在有value与label的option,然后再手动输入的value。之后获取values的时候,只有value没有lable属性了。 #8282

Closed xlorne closed 1 month ago

xlorne commented 1 month ago

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

ProFormSelect 在设置labelInValue为true,且设置mode为tags时,存在有value与label的option,然后再手动输入的value。之后获取values的时候,只有value没有lable属性了。

📷 复现步骤

先给ProFormSelect 初始化一个值{label,value},然后再输入添加一个新的值,这个时候获取就出现上述问题。

🏞 期望结果

在设置labelInValue为true,以后无论是初始化给的值,还是手动输入的值,应该都返回label与value。

💻 复现代码

import React from "react";
import {ProForm} from "@ant-design/pro-form";
import {ProFormSelect} from "@ant-design/pro-components";
import {Button} from "antd";

const Test = () => {

  const [form] = ProForm.useForm();
  const [result, setResult] = React.useState<string>("");

  const handleSetValues = () => {
    form.setFieldsValue({
      name: [
        {label: "123", value: "123"},
      ],
    });
  }

  return (
    <div>
      <h1>Test</h1>

      <Button onClick={handleSetValues}>set values </Button>
      <ProForm
        form={form}
        onFinish={async (values) => {
          setResult(JSON.stringify(values));
        }}
      >

        <ProFormSelect
          mode={"tags"}
          name="name"
          fieldProps={{
            defaultOpen: false,
            open: false,
            labelInValue: true,
          }}
          label="姓名"
          width="md"
        />

      </ProForm>

      <div>{result}</div>
    </div>
  );
};

export default Test;

© 版本信息

🚑 其他信息

image

image

这个问题还很奇怪,两个截图中,第一个截图的三个值都是输入的值,获取的结果没有label,当我删除一条再获取的时候就存在了label值

github-actions[bot] commented 1 month ago

当前 Issue 未检测到标题,请规范填写,谢谢!

The title of the current issue is not detected, please fill in according to the specifications, thank you!