react select 标签 defaultValue 和 value 踩坑日记

最新推荐文章于 2024-12-05 13:28:12 发布

丸子CC

最新推荐文章于 2024-12-05 13:28:12 发布

阅读量1.1k

点赞数

分类专栏：学习笔记前端文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47192515/article/details/127780886

版权

学习笔记同时被 2 个专栏收录

17 篇文章

订阅专栏

前端

15 篇文章

订阅专栏

在React项目中，遇到下拉框默认值设置的问题。初版使用defaultValue，导致刷新页面后数据错误，因它仅在挂载时渲染。改用value，虽然数据更新，但页面未同步。最终解决方案是结合value与onChange监听函数，确保value绑定动态数据以实现正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在写react项目，需要设置下拉框默认值.
第一版本：使用defaultValue，发现刷新页面，数据错误
分析：defaultValue只在页面挂载时渲染一次，后续数据发生变化，不再重新渲染

<div className="month">
    <select defaultValue="dayjs().get("month")" onChange={(e) => onChange(e)}>
        {months.map(month => <option key={month} value={month} >{month}</option>)}
    </select>
    月
</div>

第二版：修改为value，点击select，发现数据更新了，但页面不更新；
分析：value需要接收一个动态数据，dayjs().get(“month”)是一个死值。

<div className="month">
    <select value="dayjs().get("month")" onChange={(e) => onChange(e)}>
        {months.map(month => <option key={month} value={month} >{month}</option>)}
    </select>
    月
</div>

第三版：使用value绑定动态数据，且绑定onChange监听函数

    const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        let date = e.target.value
        if (date.length === 4) {
            setSelectDate({
                year: date,
                month: selectDate.month
            })
        } else {
            setSelectDate({
                year: selectDate.year,
                month: date
            })
        }
    }

<div className="month">
    <select value={selectDate.month} onChange={(e) => onChange(e)}>
        {months.map(month => <option key={month} value={month} >{month}</option>)}
    </select>
    月
</div>