Question

林＆＃39; new来响应angularjs，使用material-ui作为项目，我不能让select组件像select组件一样工作。基本上我想用一组对象填充下拉列表，并在用户做出选择后对所选对象执行某些操作。我遇到了很多问题，最近的一点是我无法弄清楚当组件加载时如何设置默认的起始值，而我无法看到所选的选项。 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

我认为问题在于初始选定值必须与select中项目的值匹配。

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

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

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

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

1 个答案: