我正在獲取index.tsx稍后傳遞給FormOne的資料，如下所示，然后我可以使用 FormOne 中的資料props.data
const [data, setData] = useState([]);
...
return (
...
<FormOne data={data} />
);
我想將“選擇用戶”替換FormOne為來自props.data. 這個想法是選擇用戶一個查詢，例如“他有什么地址？”，這導致用戶的電子郵件地址被列印在表單的正下方，也不知道如何做到這一點。我怎樣才能做到這一點？
import {
Box,
Button,
FormControl,
Grid,
InputLabel,
MenuItem,
Select,
SelectChangeEvent,
TextField,
Typography,
} from '@mui/material';
import { useState } from 'react';
const FormOne = (props: any) => {
const [user, setUser] = useState('');
const [query, setQuery] = useState('');
const handleChange = (event: SelectChangeEvent) => {
setUser(event.target.value);
setQuery(event.target.value);
};
return (
<Box component="form" noValidate autoComplete="off">
<Typography component="h1" variant="h4" align="center">
GUI #1
</Typography>
<Grid container spacing={2}>
<Grid item xs={12}>
<FormControl variant="outlined" fullWidth>
<InputLabel id="demo-simple-select-label">Pick a user</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={user}
onChange={handleChange}
>
<MenuItem value={10}>User 1</MenuItem>
<MenuItem value={20}>User 2</MenuItem>
<MenuItem value={30}>User 3</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12}>
<FormControl variant="outlined" fullWidth>
<InputLabel id="demo-simple-select-label">Query</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={query}
onChange={handleChange}
>
<MenuItem value={10}>What email does he use?</MenuItem>
<MenuItem value={20}>What address does he have?</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12}>
<Button variant="contained">Submit</Button>
</Grid>
</Grid>
</Box>
);
};
export default FormOne;
代碼沙盒
uj5u.com熱心網友回復：
import {
Box,
Button,
FormControl,
Grid,
InputLabel,
MenuItem,
Select,
SelectChangeEvent,
Typography,
} from '@mui/material';
import { useState, useEffect } from 'react';
interface User {
id: number;
name: string;
username: string;
email: string;
address: {
street: string;
suite: string;
city: string;
zipcode: string;
geo: {
lat: string;
lng: string;
};
};
phone: string;
website: string;
company: {
name: string;
catchPhrase: string;
bs: string;
};
}
const FormOne = (props: any) => {
const [selectedUser, setSelectedUser] = useState<User | null>(null);
const [selectedQuery, setSelectedQuery] = useState<number>(1);
// both handle change functions must be seperate
const handleQueryChange = (event: SelectChangeEvent) => {
setSelectedQuery(Number(event.target.value));
};
const handleUserChange = (event: SelectChangeEvent) => {
// since select menu item accepts string number or string[] values we put id as the value but in state we can filter the user out like this
const user = props.data.find(
(user: User) => user.id === Number(event.target.value)
);
setSelectedUser(user);
};
return (
<Box component="form" noValidate autoComplete="off">
<Typography component="h1" variant="h4" align="center">
GUI #1
</Typography>
<Grid container spacing={2}>
<Grid item xs={12}>
<FormControl variant="outlined" fullWidth>
<InputLabel id="user-label">Pick a user</InputLabel>
<Select
labelId="user-label"
id="user"
value={selectedUser?.id?.toString()}
onChange={handleUserChange}
>
{/* you can map users using javascript map function */}
{props.data.map((user: User) => {
return (
<MenuItem key={user.id} value={user.id.toString()}>
{user.email}
</MenuItem>
);
})}
</Select>
</FormControl>
</Grid>
<Grid item xs={12}>
<FormControl variant="outlined" fullWidth>
<InputLabel id="query-label">Query</InputLabel>
<Select
labelId="query-label"
id="query"
value={selectedQuery.toString()}
onChange={handleQueryChange}
>
<MenuItem value={1}>What email does he use?</MenuItem>
<MenuItem value={2}>What address does he have?</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12}>
<Button variant="contained">Submit</Button>
</Grid>
<Grid item xs={12}>
{selectedUser && selectedQuery === 1 && (
<p>user email : {`${selectedUser?.email}`}</p>
)}
{selectedUser && selectedQuery === 2 && (
<p>
user address : {selectedUser?.address?.street}
{selectedUser?.address?.city}
</p>
)}
</Grid>
</Grid>
</Box>
);
};
export default FormOne;
所以基本上，你需要映射道具才能被menuItems渲染。而且，為了顯示用戶資料，您必須像我在代碼中所做的那樣顯示它。
uj5u.com熱心網友回復：
在我看來，您想動態呈現 MenuItem 組件，以便存檔您應該替換硬編碼的
<MenuItem value={10}>User 1</MenuItem>
<MenuItem value={20}>User 2</MenuItem>
<MenuItem value={30}>User 3</MenuItem>
像這樣：
{props.data.map((item, index) => {
return <MenuItem key={index} value={item}>{item}</MenuItem>
})}
您可以在此處閱讀有關串列和鍵渲染的更多資訊： https ://reactjs.org/docs/lists-and-keys.html
為了列印用戶，由于您在選擇更改時更改用戶，因此在正確渲染 MenuItems 后，您應該在用戶物件中擁有該資訊，并且您應該能夠像這樣渲染它。
{ user && <p>{user}</p> }
如果您仍然需要幫助，您需要添加資料物件的外觀，以便我幫助您。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/450518.html