设置MUI选择默认值的触发器api调用
设置MUI选择默认值的触发器api调用
提问于 2022-08-26 16:05:20
简而言之，：在.中设置默认值时执行onChange事件
当您将运行此react组件时，您将发现一个带有default选项的实质性UI选择组件，该选项正在使用useState hook.How进行设置，以便在设置默认值时同时进行API调用。只有当我们更改下拉菜单时，onChange道具才会执行--我们正在用一些加载页面，并设置一些默认菜单项，然后我们如何进行一个API调用并获取一些数据。
使用CodeSand框链接。即使选择中的菜单项/选项从空字符串更改为10，警告消息也不会执行。
假设默认值来自某个API调用。
export default function SelectVariants() {
const [age, setAge] = React.useState("10");
//This should execute by default or on Page Load
const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.value);
alert("Run on load"); // Can be an API Call on the Page load And also on Subsequent onChange Events
};
return (
<div>
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="demo-simple-select-standard-label">Age</InputLabel>
<Select
labelId="demo-simple-select-standard-label"
id="demo-simple-select-standard"
value={age}
onChange={handleChange}
label="Age"
>
<MenuItem value={""}>None</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
}回答 1
Stack Overflow用户
发布于 2022-08-26 18:08:00
根据这一要求：
在来自API调用( API -1) ->的->上设置一个默认值，然后使用相同的默认值，触发另一个API调用(API-2) ->，然后在
Select的每个onChange菜单上，也只使API调用(API-2)。
const [age, setAge] = React.useState("");
useEffect(() => {
api1().then((defaultValue) => {
setAge(defaultValue);
api2(defaultValue);
});
}, []);
const handleChange = (event) => {
setAge(event.target.value);
api2(event.target.value);
};希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73507492
复制相关文章
相似问题
唯一ID算法
当使用非ID属性检索REST资源时，如何构造URL？
成员:使用唯一ID与域对象
REST服务的唯一请求ID的HTTP响应头
层次化REST中的复合ID
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
