reactjs - react Material -ui 选择不起作用

Question

我是新来的 AngularJS react ，在项目中使用 Material-ui，但我无法让选择组件像选择组件一样工作。基本上，我想用一组对象填充下拉列表，并在用户做出选择后对所选对象执行某些操作。我遇到了很多问题，最近的一个是我不知道如何在组件加载时设置默认起始值​​，并且在 GUI 中看不到所选选项。我可以设置状态并将其记录到控制台，您只是在选择组件中看不到它。另外，@material-ui/core 和material-ui 之间有什么区别。它们是不同的库，还是同一库的不同版本？

  class HomePage extends React.Component {
  constructor(props) {
    super();
    this.reportSelected = this.reportSelected.bind(this);
    this.state = {
      report: "report1"
    };
  }
  static propTypes = {
    classes: PropTypes.object
  };

  reports = [
    {
      name: "report1"
    },
    {
      name: "report2"
    },
    {
      name: "report3"
    }
  ];

  reportSelected = event => {
    this.setState((prevState) => {
      return {
        report: event.target.value
      }
    }, console.log(this.state))
  };

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

    return (
      <div className={classes.homePage}>
        <HeaderTitle title="Home" />
        <Helmet>
          <title>{headerTitle}</title>
        </Helmet>

        <form>
          <FormControl className={classes.reportsDropdown}>
            <InputLabel htmlFor="reports">Reports</InputLabel>
            <Select
              value={this.state.report}
              onChange={this.reportSelected}
            >
              {this.reports.map(report => (
                <MenuItem value={report.name} key={report.name}>
                  {report.name}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </form>
      </div>
    );
  }
}

更新:

以下代码按预期工作，

class HomePage extends React.Component {
  constructor(props) {
    super();
    this.reportSelected = this.reportSelected.bind(this);
    this.state = {
      report: "report1"
    };
  }
  static propTypes = {
    classes: PropTypes.object
  };

  reports = [
    {
      name: "report1"
    },
    {
      name: "report2"
    },
    {
      name: "report3"
    }
  ];

  reportSelected = event => {
    this.setState(() => {
      return {
        report: event.target.value
      }
    })
  };

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

    return (
      <div className={classes.homePage}>
        <HeaderTitle title="Home" />
        <Helmet>
          <title>{headerTitle}</title>
        </Helmet>

        <form>
          <FormControl className={classes.reportsDropdown}>
            <InputLabel htmlFor="reports">Reports</InputLabel>
            <Select
              value={this.state.report}
              onChange={this.reportSelected}
            >
              {this.reports.map(report => (
                <MenuItem value={report.name} key={report.name}>
                  {report.name}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </form>
      </div>
    );
  }
}

Answer 1

我想问题是初始选择的值必须与选择中项目的值匹配。

在代码示例中，您使用名称属性 this.reports[0].name 作为初始值，但您的菜单项使用对象本身作为值，即 value ={报告}。

使用 name 属性作为菜单项的值，或者使用 this.reports[0] 作为初始值，看看是否有效。

关于你的第二个问题，ma​​terial-ui是该库的早期版本(0.xx系列)。 @material-ui 是最新最好的 1.11 版本。