Ken428965 2022-12-15 12:10 采纳率: 53.4%
浏览 22
已结题

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

在使用的react版本如下:

img


已写的代码:

// 户型
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名称:

img

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

img

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

  • 写回答

1条回答 默认 最新

  • 励志前端小黑哥 2022-12-15 12:58
    关注

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月15日
  • 已采纳回答 12月15日
  • 创建了问题 12月15日

悬赏问题

  • ¥15 Python语言实验
  • ¥15 SAP HANA SQL 增加合计行
  • ¥20 用C#语言解决一个英文打字练习器,有偿
  • ¥15 srs-sip外部服务 webrtc支持H265格式
  • ¥15 在使用abaqus软件中,继承到assembly里的surfaces怎么使用python批量调动
  • ¥15 大一C语言期末考试,求帮助🙏🙏
  • ¥15 ch340驱动未分配COM
  • ¥15 Converting circular structure to JSON
  • ¥30 Hyper-v虚拟机相关问题,求解答。
  • ¥15 TSM320F2808PZA芯片 Bootloader