Reactjs 添加禁用的默认选项以 Select

发布于07月26日

我想在select中有一个默认选项，说"select your option".但我想禁用，这意味着用户一旦 Select 任何值，就不能 Select 它.

下面是一个示例:

function Select() {
    const [option, setOption] = useState();

    function handleOnChange(event) {
        setOption(event.target.value);
    }

    return (
        <select value={option} onChange={handleOnChange}>
            <option disabled>Select your option</option>
            {OPTIONS.map(value => (
                <option key={value} value={value}>{value}</option>
            ))}
        </select>
    );
}

但是如果我把disabledprops 添加到option，它会 Select 第一个未禁用的选项.应该调整什么以使其工作？

提前感谢

推荐答案

你需要做的是为你的useState和你的默认选项提供一个默认值，这样它就会被选中.这样地:

function Select() {
    const [option, setOption] = useState('');

    function handleOnChange(event) {
        setOption(event.target.value);
    }

    return (
        <select value={option} onChange={handleOnChange}>
            <option value='' disabled>Select your option</option>
            {OPTIONS.map(value => (
                <option key={value} value={value}>{value}</option>
            ))}
        </select>
    );
}