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

[itcook]

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

Basic Info

• Package Name And Version: @arco-design/mobile-react@2.31.3
• 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 ( <>

setCurrent(val)} renderLinkedContainer={(_, data) => ( {data[0]?.label || "请选择"} )} />

    </>
);

}

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;