反应材料-ui选择不起作用答案

【问题标题】：react material-ui select not working反应材料-ui选择不起作用
【发布时间】：2018-11-08 08:17:49
【问题描述】：

我刚从 angularjs 做出反应，将 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>
    );
  }
}

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

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

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

关于你的第二个问题，material-ui 是该库的上一版本（0.xx 系列）。 @material-ui 是最新最好的 1.11 版本。

【讨论】：