[英]Material Ui label breaking in Select component
i have been trying to implement a select component, nothing as I have ever done before, But suddenly my mui-select component is breaking, Below is the image of the bug/issue i am facing我一直在尝试实现一个 select 组件,我以前从未做过任何事情,但突然我的 mui-select 组件坏了,下面是我面临的错误/问题的图片
The label of the select element is no longer in sync with the select component itself Here is the code: select 元素的 label 不再与 select 组件本身同步这是代码:
<FormControl size="small" fullWidth>
<InputLabel id="demo-simple-select-helper">
Marital Status
</InputLabel>
<Select
labelId="demo-simple-select-helper"
id="demo-simple-select-helper"
label="Marital Status"
defaultValue=""
{...getFieldProps('pf.maritalStatus')}
>
<MenuItem value="married">Married</MenuItem>
<MenuItem value="unmarried">Unmarried</MenuItem>
<MenuItem value="widow">Widow</MenuItem>
<MenuItem value="widower">Widower</MenuItem>
<MenuItem value="divorcee">Divorcee</MenuItem>
</Select>
</FormControl>
Is there anything wrong i am doing here?我在这里做错了什么吗?
Here is the snippet used in the mui docs这是mui文档中使用的片段
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
Please can anyone tell what's wrong i am doing here?请问谁能告诉我我在这里做错了什么?
const [age,setAge] = React.useState();
function handleChange(e){
setAge(e.currentTarget.value);
}
return(
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.