[英]Default Value in Select and MenuItem of MUI
i have a edit form with filled input, the values are shown on textField accordingly but on DropDown it's not showing default value, [ check Select ], [ check other Fields ]我有一个填充输入的编辑表单,值相应地显示在 textField 上,但在 DropDown 上它没有显示默认值,[检查 Select ],[检查其他字段]
<Select
name="active"
labelId="active-label"
id="active"
onChange={handleChange}
onBlur={handleBlur}
value={values.active}
defaultValue={values.active}
error={touched.active && Boolean(errors.active)}
>
<MenuItem value={true}>Yes</MenuItem>
<MenuItem value={false}>No</MenuItem>
</Select>
i just want to display this default value too, it can be solved if i used option insted of meanuItem but option will not display dropdown items as i want check my code below and image for display dropdown with option我也只想显示此默认值,如果我使用 meanuItem 的选项 insted 可以解决,但选项不会显示下拉项目,因为我想检查下面的代码和带有选项的显示下拉列表的图像
<Select
native
name="active"
labelId="active-label"
id="active"
onChange={handleChange}
onBlur={handleBlur}
value={values.active}
defaultValue={values.active}
>
<option value={true} >Yes</option>
<option value={false}>No</option>
</Select>
the code for user binding with values:用户绑定值的代码:
const [user, setUser] = useState({});
async function getData(id) {
const fetchedUser = await fetch(`${state.baseUrl}users/${id}`, {
method: "GET",
headers: {
Authorization: `Bearer ${state.loginToken}`,
},
})
.then((response) => response.json())
.catch((err) => console.error(err));
setUser(fetchedUser);}
useEffect(() => {
getData(id);
}, []);
const initialValues = {
fullName: user.fullname,
email: user.email,
userName: user.username,
organ: String(user.organization),
password: "",
role: String(user.role),
active: user.is_active};
usually defaultValue
is used for uncontrolled component通常defaultValue
用于非受控组件
you can have the boolean
values for MenuItem
here as string
as all the values in DOM
are strings in general您可以在此处将MenuItem
的boolean
值作为string
,因为DOM
中的所有值通常都是字符串
<Select
name="active"
labelId="active-label"
id="active"
onChange={handleChange}
onBlur={handleBlur}
defaultValue={values.active.toString()} // must match type of value so (convert to string / number)
error={touched.active && Boolean(errors.active)}
>
<MenuItem value={true}>Yes</MenuItem> // value must be string or number
<MenuItem value={false}>No</MenuItem> // value must be string or number
</Select>;
What is your issue, default value is not getting displayed if you use MenuItem and if you use option then default value is getting display, but the Styling of the Options is old one if I am it's all about default value then please try the below code您的问题是什么,如果您使用 MenuItem,则不会显示默认值,如果您使用选项,则会显示默认值,但如果我是默认值,则选项的样式是旧的,请尝试以下代码
if values object is like如果值 object 就像
const values = {
active: true,
};
Then the below code will be然后下面的代码将是
<Box>
<Select
name="active"
labelId="active-label"
id="active"
onChange={handleChange}
onBlur={handleBlur}
value={values.active}
sx={{ width: "10rem" }}
>
<MenuItem value={true}>Yes</MenuItem>
<MenuItem value={false}>No</MenuItem>
</Select>
</Box>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.