问题描述
我在代码中使用了 <InputLabel>
和 Select
和 MenuItem
组件,如下所示:
<div className="form-field full-width-field ">
<InputLabel>Q3.Is this the correct data?</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={''}
onChange={handleChange}
>
<MenuItem value={'Y'}>Yes</MenuItem>
<MenuItem value={'N'}>No</MenuItem>
</Select>
</div>
因此,当我在 value = {''}
中使用如上所示的 Select
时,我没有看到代码中有任何错误。但是,当用户选择Yes
或No
时,屏幕上什么也没有显示,如下图:
但是,当我注释掉 value = {''}
部分并像这样使用它时:
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
//value={''}
onChange={handleChange}
>
它在屏幕上显示用户选择 Yes
或 No
,但我在控制台中不断收到以下警告:红色:
警告:组件正在更改不受控制的类型输入 undefined 被控制。输入元素不应从 不受控制到受控制(反之亦然)。决定使用 在整个生命周期内受控或不受控制的输入元素 组件。
我该如何解决这两个问题?
解决方法
让您的组件受到控制。
const [answer,setAnswer] = useState('');
function handleChange(event) {
setAnswer(event.target.value);
}
<div className="form-field full-width-field ">
<InputLabel>Q3.Is this the correct data?</InputLabel>
<Select labelId="demo-simple-select-label"
id="demo-simple-select"
value={answer}
onChange={handleChange}>
<MenuItem value={'Y'}>Yes</MenuItem>
<MenuItem value={'N'}>No</MenuItem>
</Select>
</div>