react，使用Form.Item包裹Picker，Picker获取到value值后，如何把对应的label名称显示出来？

Question

在使用的react版本如下：

已写的代码：

// 户型
const roomTypeData = [
  { label: '一室', value: 'ROOM|d4a' },
  { label: '二室', value: 'ROOM|d1a' },
  { label: '三室', value: 'ROOM|209' },
  { label: '四室', value: 'ROOM|ce2' },
  { label: '四室+', value: 'ROOM|273' }
]
// 所在楼层
const floorData = [
  { label: '高楼层', value: 'FLOOR|1' },
  { label: '中楼层', value: 'FLOOR|2' },
  { label: '低楼层', value: 'FLOOR|3' }
]
// 朝向
const orientedData = [
  { label: '东', value: 'ORIEN|141' },
  { label: '西', value: 'ORIEN|103' },
  { label: '南', value: 'ORIEN|61e' },
  { label: '北', value: 'ORIEN|caa' },
  { label: '东南', value: 'ORIEN|dfb' },
  { label: '东北', value: 'ORIEN|67a' },
  { label: '西南', value: 'ORIEN|235' },
  { label: '西北', value: 'ORIEN|807' }
]
const RentAdd = () => {
  const [huxingvisible, setHuxingVisible] = useState(false)
  const [suozailoucengvisible, setSuozailoucengVisible] = useState(false)
  const [chaoxiangvisible, setChaoxiangVisible] = useState(false)
  // 房屋类型
    const [roomType,setRoomType] = useState('')
    // 楼层
    const [floor, setFloor] = useState('')
    // 朝向：
    const [oriented,setOriented] = useState('')
  function Huxing() {
    return (
      <>
        <Picker
          title='户       型'
          columns={[roomTypeData]}
          visible={huxingvisible}
          value={roomType}
          mouseWheel={true}
          popupClassName={styles.huxing}
          onClose={() => {setHuxingVisible(false)}}
          onConfirm={(v = []) => {
            let item = roomTypeData.find(r => r.value === v[0]) || {}
            setRoomType(item.value)
          }}
        />
      </>
    )
  }
  function Suozailouceng() {
    return (
      <>
        <Picker
          title='所在楼层'
          columns={[floorData]}
          visible={suozailoucengvisible}
          value={floor}
          mouseWheel={true}
          popupClassName={styles.suozailouceng}
          onClose={() => {setSuozailoucengVisible(false)}}
          onConfirm={(v = []) => {
            let item = floorData.find(r => r.value === v[0]) || {}
            setFloor(item.value)
          }}
        />
      </>
    )
  }
  function Chaoxiang() {
    return (
      <>
        <Picker
          title='朝       向'
          columns={[orientedData]}
          visible={chaoxiangvisible}
          value={oriented}
          mouseWheel={true}
          popupClassName={styles.chaoxiang}
          onClose={() => {setChaoxiangVisible(false)}}
          onConfirm={(v = []) => {
            let item = orientedData.find(r => r.value === v[0]) || {}
            setOriented(item.value)
          }}
        />
      </>
    )
  }
    return (<>
                  <Form.Item
            label='户       型'
            extra={roomType.length ? roomType : '请选择'}
            arrow={true}
            onClick={() => {
              setHuxingVisible(true)
            }}
          >
            {Huxing()}
          </Form.Item>
          <Form.Item
            label='所在楼层'
            extra={floor.length ? floor : '请选择'}
            arrow={true}
            onClick={() => {
              setSuozailoucengVisible(true)
            }}
          >
            {Suozailouceng()}
          </Form.Item>
          <Form.Item
            label='朝       向'
            extra={oriented.length ? oriented : '请选择'}
            arrow={true}
            onClick={() => {
              setChaoxiangVisible(true)
            }}
          >
            {Chaoxiang()}
          </Form.Item>
</>
    )
}

当点击picker里的每一项后，可看到已成功获取到每一项的value值并在弹出的picker显示出label名称：

然而，点击确定后显示出来的也是value值而不是对应的label名称：

请问如何才能让弹出的picker里的label名称在点击确认后显示在界面上？在Form.Item里的extra的代码应该如何写才能实现想要的效果？

Answer 1

回答参考这个问题，http://t.csdn.cn/tgGdp

觉得有用请采纳，关注我，带你了解更多前端知识！