关于select:React中select设置defaultValue不生效

42次阅读

共计 503 个字符,预计需要花费 2 分钟才能阅读完成。

问题

这样一种写法下,defaultValue是不会失效的。

function Test() {const [dv, setDv] = useState(0)

    // 在某个元素的点击回调中 setDv()
    // foo.onClick = () => {setDv(bar)}

    return(
        <select
            defaultValue={dv}
        >
            <option value='1' >1</option>
            <option value='2' >2</option>
            <option value='3' >3</option>
        </select>
    )
}

解决

<select/> 加个动静 key 强制执行渲染。

function Test() {const [dv, setDv] = useState(0)

    // 在某个元素的点击回调中 setDv()
    // foo.onClick = () => {setDv(bar)}

    return(
        <select
            key={Date.now()}
            defaultValue={dv}
        >
            <option value='1' >1</option>
            <option value='2' >2</option>
            <option value='3' >3</option>
        </select>
    )
}

正文完
 0