Picker 作为 Form.Item 子元素时，选择选项后，显示的为 value 的值，而不是 label 值

[itcook]

• I'm sure this does not appear in the issue list of the repository

Basic Info

• Package Name And Version: @arco-design/[email protected]
• Phone Model And Version: Any

Picker 作为 Form.Item 子元素时，选择选项后，显示的为 value 的值，而不是label值

[adaex]

@itcook

Hello, could you please provide a reproducible link?

你好，是否可以提供一个可以复现的链接？

[itcook]

@adaex

感谢回复。

这里是演示代码的仓库地址：https://github.com/itcook/arco-mobile-picker-demo

这里是打包后的演示地址：http://picker-demo.deyu13.com/

[shenhaidada]

@itcook 这块forum的设计就是获取了picker返回的value值并且展示value值，如果需要展示label，这里解决方案是把label和value设置为同一个值哈

[shenhaidada]

@itcook 或者是使用picker的renderLinkedContainer这个prop，具体案例在https://arco.design/mobile/react/arco-design/pc/#/components/picker 中的复杂样式中，但是需要自行适配一下样式。具体示例代码为
`import { Picker, Form } from "@arco-design/mobile-react";
import { ValueType } from "@arco-design/mobile-react/cjs/checkbox";
import { useState } from "react";
function App() {
const inerData = [
{ label: "男", value: "male" },
{ label: "女", value: "female" },
];
const [current, setCurrent] = useState<ValueType[]>([""]);
return (
<>

<Picker
cascade={false}
data={inerData}
value={current}
onChange={(val) => setCurrent(val)}
renderLinkedContainer={(_, data) => (
<Form.Item label="PickerInForm" field="gender">
{data[0]?.label || "请选择"}
</Form.Item>
)}
/>

</>
);
}

export default App;
`

[itcook]

@shenhaidada 感谢答复！value 和 label 在很多业务场景中都是不一样的，常规的实现方式都是显示 label 值。所以即使使用 renderLinkedContainer 可以解决问题，但还是建议可以优化为显示默认显示 label值。

再次感谢~

[shenhaidada]

@itcook 刚才的代码示例不太合理，这边改成如下会合理一些哈～

import { Picker, Form } from "@arco-design/mobile-react";
function App() {
    return (
        <>
            <Form>
                <Form.Item label="PickerInForm" field="gender">
                    <Picker
                        cascade={false}
                        data={[
                            { label: "男", value: "male" },
                            { label: "女", value: "female" },
                        ]}
                        renderLinkedContainer={(_, data) => (
                            <span>{data[0]?.label || "请选择"}</span>
                        )}
                    />
                </Form.Item>
            </Form>
        </>
    );
}

export default App;

[canvascat]

@itcook 刚才的代码示例不太合理，这边改成如下会合理一些哈～

import { Picker, Form } from "@arco-design/mobile-react";
function App() {
    return (
        <>
            <Form>
                <Form.Item label="PickerInForm" field="gender">
                    <Picker
                        cascade={false}
                        data={[
                            { label: "男", value: "male" },
                            { label: "女", value: "female" },
                        ]}
                        renderLinkedContainer={(_, data) => (
                            <span>{data[0]?.label || "请选择"}</span>
                        )}
                    />
                </Form.Item>
            </Form>
        </>
    );
}

export default App;

@shenhaidada 在有initialValues时，比如

initialValues={
  gender: ['male']
}

会显示为 请选择，需要手动选择后才会显示为选择的值，问题参见 #293