[英]Get data on dropdown based on another dropdown value
Sample API data - http://demo6007276.mockable.io/test样本 API 数据 - http://demo6007276.mockable.io/test
I have three dropdowns as followed:我有以下三个下拉列表:
From Release
To Release
Compatability
Once I select specific from release
then all to releases
associated with that from release
should be available in the To Release
dropdown which is working.一旦我 select 特定
from release
,那么to releases
相关的所有发行from release
都应该在正在工作的To Release
下拉列表中可用。 Now I am unable to select a specific to release
from the To release
dropdown and it should show its compatibility in the Compatability dropdown.现在我无法 select 从
To release
to release
列表中发布,它应该在 Compatability 下拉列表中显示其兼容性。 Here is my code:这是我的代码:
const URL = "http://demo6007276.mockable.io";
export const fetchRelease = async () => {
try {
const { data } = await axios.get(`${URL}/test`);
return data;
} catch (error) {
console.log(error);
}
}
function HomeFragement() {
const classes = Styles();
const [releases, setReleases] = React.useState([]);
const [fromRelease, setFromRelease] = React.useState('Release1');
const [toRelease, setToRelease] = React.useState('');
const [compatability, setCompatability] = React.useState('');
React.useEffect(() => {
let unmounted = false;
const handleFetchReleases = async () => {
const response = await fetchRelease();
if (!unmounted) {
setReleases(response);
}
}
handleFetchReleases();
return () => {
unmounted = true;
};
}, [])
let tRelease = releases.filter(item => {
return item.fromRelease === fromRelease
})
let compt = releases.filter(item => {
return item.fromRelease === fromRelease
})
const handleChangeFromRelease = (e) => {
setFromRelease(e.target.value);
}
const handleChangeToRelease = (e) => {
setToRelease(e.target.value);
}
const handleChangeCompatability = (e) => {
setCompatability(e.target.value);
}
return (
<div>
<Box bgcolor="#fff" boxShadow={1} p={2}>
<form className={classes.root} autoComplete="off">
<Grid container spacing={3}>
<Grid item xs={3}>
<InputLabel>From Release</InputLabel>
<Select value={fromRelease} onChange={(e) => handleChangeFromRelease(e)}>
{
releases.map((pvalue, i) => {
return <MenuItem key={i} value={pvalue.fromRelease}> {pvalue.fromRelease} </MenuItem>
})
}
</Select>
</Grid>
<Grid item xs={3}>
<InputLabel>To Release</InputLabel>
<Select value={toRelease} onChange={(e) => handleChangeToRelease(e)}>
{
tRelease[0] && tRelease[0].releases.map((pvalue, i) => {
return <MenuItem key={i} value={pvalue.toRelease}> {pvalue.toRelease} </MenuItem>
})
}
</Select>
</Grid>
<Grid item xs={3}>
<InputLabel>Compatability</InputLabel>
<Select value={compatability} onChange={(e) => handleChangeCompatability(e)}>
{
compt[0] && compt[0].releases.map((pvalue, i) => {
return <MenuItem key={i} value={pvalue.compatability}> {pvalue.compatability} </MenuItem>
})
}
</Select>
</Grid>
</Grid>
</form>
</Box>
</div>
)
}
export default HomeFragement
Any suggestion, please?请问有什么建议吗?
I made few changes in your code.我对你的代码做了一些改动。 I created new state for compatibilities array which will hold compatibilities based on the selected toRelease (Even though right now you are getting only one compatibility, in future you may receive many, so better to have an array).
我为兼容性数组创建了新的 state,它将根据所选的 toRelease 保持兼容性(即使现在你只获得一个兼容性,将来你可能会收到很多,所以最好有一个数组)。
const [compatibilities, setCompatabilities] = React.useState([]);
Then modified below method:然后修改以下方法:
const handleChangeToRelease = (e) => {
const value = e.target.value;
setToRelease(value);
// first get the selected fromRelease
const fromReleaseObj = releases.find(release => release.fromRelease === fromRelease);
// by using fromRelease object get the selected toRelease object
const toReleaseObj = fromReleaseObj.releases.find(release => release.toRelease === value);
// now set the array we defined earlier using react hook to `toReleaseObj`'s compatibility
setCompatibilities([toReleaseObj.compatability])
};
In your render method, make sure you are using the compatibilities array which was defined earlier in this answer.在您的渲染方法中,确保您使用的是本答案前面定义的兼容性数组。
<Grid item xs={3}>
<InputLabel>Compatability</InputLabel>
<Select
value={compatability}
onChange={(e) => handleChangeCompatability(e)}
>
{compatibilities.map((compatability, i) => {
return (
<MenuItem key={i} value={compatability}>
{" "}
{compatability}{" "}
</MenuItem>
);
})}
</Select>
</Grid>
Here's the code sandbox link: https://codesandbox.io/s/happy-bird-bme2u , It won't work because you might get some CORS error and in console you may see Failed to fetch
.这是代码沙箱链接: https://codesandbox.io/s/happy-bird-bme2u ,它不起作用,因为您可能会收到一些 CORS 错误,并且在控制台中您可能会看到
Failed to fetch
。 So make sure you export it using file menu and download it in your system.因此,请确保使用文件菜单将其导出并将其下载到系统中。
Once downloaded, using terminal install npm packages using the command npm run install
and run it using npm start
.下载后,使用终端安装 npm 包,使用命令
npm run install
并使用npm start
运行它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.