Question

我试图在材料ui中显示选择，我需要在所有可以选择的值中选择一项。这是代码。我有datatoloop，我需要遍历它并选择主题并在控制台中获取它们的ID。我无法弄清楚我做错了什么还是材料ui只接受docs页面中显示的格式。这是文档页面

这是我尝试编辑代码的沙箱链接 sandbox link

    import React from "react";
    import PropTypes from "prop-types";
    import { withStyles } from "@material-ui/core/styles";
    import Input from "@material-ui/core/Input";
    import InputLabel from "@material-ui/core/InputLabel";
    import MenuItem from "@material-ui/core/MenuItem";
    import FormHelperText from "@material-ui/core/FormHelperText";
    import FormControl from "@material-ui/core/FormControl";
    import Select from "@material-ui/core/Select";

    const styles = theme => ({
      root: {
        display: "flex",
        flexWrap: "wrap"
      },
      formControl: {
        margin: theme.spacing.unit,
        minWidth: 120
      },
      selectEmpty: {
        marginTop: theme.spacing.unit * 2
      }
    });
    let datatoloop = [
      { id: 100, subject: "math" },
      { id: 101, subject: "physics" },
      { id: 102, subject: "chemistry" }
    ];
    class SimpleSelect extends React.Component {
      state = {
        age: "",
        name: "hai"
      };

      handleChange = event => {
        this.setState({ [event.target.name]: event.target.value });
      };

      render() {
        const { classes } = this.props;

        return (
          <form className={classes.root} autoComplete="off">
            <FormControl className={classes.formControl}>
              <InputLabel htmlFor="age-simple">Age</InputLabel>
              <Select
                value={this.state.age}
                onChange={this.handleChange}
                inputProps={{
                  name: "age",
                  id: "age-simple"
                }}
              >
                <MenuItem value="">
                  <em>None</em>
                </MenuItem>
                {datatoloop.map(item => {
                  <MenuItem value={item.id}>{item.subject}</MenuItem>;
                })}
              </Select>
            </FormControl>
          </form>
        );
      }
    }

    SimpleSelect.propTypes = {
      classes: PropTypes.object.isRequired
    };

    export default withStyles(styles)(SimpleSelect);

Answer 1

在将它们映射到反应树中时，您忘记了返回组件。

这是工作代码和框：MenuItems Rendering

Answer 2

return  <MenuItem value={item.id}>{item.subject}</MenuItem>;

当要呈现的数据列表时，材料ui选择不起作用

2 个答案: