为 select 字段使用 props 数据

Question

我正在 index.tsx 中获取数据，稍后我将其传递给 FormOne，如下所示，然后我可以使用 props.data[= 在 FormOne 中使用数据19=]

const [data, setData] = useState([]);

...

return (
    ...
    <FormOne data={data} />
);

我想用 props.data 中的用户列表替换 FormOne 中的“选择用户”。这个想法是 select 用户查询，例如“他有什么地址？”，这导致用户的电子邮件地址打印在表格的正下方，也不知道该怎么做。我怎样才能做到这一点？

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;

CodeSandbox

Answer 1

在我看来，您想动态呈现 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

为了打印用户，因为您在 select 更改时更改用户，在正确呈现 MenuItems 之后，您应该在用户对象中包含该信息，并且您应该能够像这样呈现它。

{ user && <p>{user}</p> }

如果您仍然需要帮助，您需要添加数据对象的外观，以便我帮助您。

Answer 2

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 渲染。而且，为了显示用户数据，您必须像我在代码中所做的那样显示它。

为 select 字段使用 props 数据

Using props data for a select field

typescript

reactjs

material-ui

next.js

CodeSandbox