Question

我已经创建了选定的框。使用功能组件...我从后端获取项目列表，我循环该列表并在前端显示....现在我需要选择项目在框中显示我选择的内容...对此有何帮助...

请在此链接https://codesandbox.io/s/gallant-water-fnqiv

中查看我的示例代码

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  }
}));

const lists = ["Ten", "twenty", "Thirty", "Fourty", "Fifity", "Sixty"];
export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState("");

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
  React.useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  const handleChange = event => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
          Age
        </InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          labelWidth={labelWidth}
        >
          <MenuItem value={""}>
            {lists.map(item => {
              <li>{item.list}</li>;
            })}
          </MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

Answer 1

名为item.list的数组中没有属性，因此您需要单独使用item本身会提供所需的值。

还要确保<MenuItem value={item}>在lists.map()方法内部。

在list.map（）方法内部包含MenuItem的return语句，这会在您的代码和框链接中引发错误

因此

更改：

<MenuItem value={""}>
            {lists.map(item => {
              <li>{item.list}</li>;
            })}
          </MenuItem>

收件人：

{lists.map(item => {
            return (
              <MenuItem value={item}>
                <li>{item}</li>
              </MenuItem>
            );
          })}

Forked Codesandbox

Answer 2

您可以试试这个-

<div>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
          Age
        </InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          labelWidth={labelWidth}
        >
          {lists.map(item => (
            <MenuItem value={item}>{item}</MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>

https://codesandbox.io/s/material-ui-select-m8lgt

Answer 3

更新的代码沙箱link

您的MenuItem错误。

{lists.map(item => (
            <MenuItem value={item}>{item}</MenuItem>
          ))}

需要选择选择项目的材料ui列表

3 个答案: