如何检测 React Material UI Select Field 是否扩展？答案

【问题标题】：How to detect if React Material UI Select Field is expanded?如何检测 React Material UI Select Field 是否扩展？
【发布时间】：2017-11-16 12:30:08
【问题描述】：

我正在尝试确定 SelectField 是否已展开，即下拉菜单及其 MenuItems 是否可见。

目前我大致使用以下方法：

<SelectField onClick={() => this.setState({ isExpanded: true })} >
    <MenuItem primaryText={
      <MenuItemContent onHide={() => this.setState({ isExpanded: false })}} />
    }>
</SelectField>

在MenuItemContent我实现了

class MenuItemContent extends React.Component {
  componentWillUnmount = () => this.props.onHide()
}

这种方法有一个缺点，当您在菜单外单击时，不会立即触发 componentWillUnmount 调用，而是在 200 毫秒后触发，尽管 MenuItems 不再可见。

选择字段菜单可以通过点击展开，展开后，当点击某个菜单项或用户点击菜单外时，它会隐藏。

这是 SelectField 展开时的样子：

这里是折叠的：

【问题讨论】：

标签： reactjs dropdown material-ui

【解决方案1】：

为了更好地处理SelectField关闭事件，您可以使用属性dropDownMenuProps：

/**
 * Object that can handle and override any property of component DropDownMenu.
 */
dropDownMenuProps: PropTypes.object,

通过使用这个道具，我们可以通过处理函数传递给DropDownMenu组件onClose道具，它将在DropDownMenu关闭后立即触发（由ESC，外部点击或项目选择引起)。不幸的是DropDownMenu 组件没有提供类似的道具来确定开口所以唯一的方法（没有扩展组件）是按照您的方法使用onClick 事件处理程序。这是我的工作测试示例：

  onSelectClose = () => {
    console.log("close")
  }

  onSelectOpen = () => {
    console.log("open")
  }

  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <SelectField
            floatingLabelText="Frequency"
            onClick={this.onSelectOpen}
            dropDownMenuProps={{
              onClose: this.onSelectClose
            }}
            value={this.state.value}
            onChange={this.handleChange}>
              <MenuItem value={1} primaryText="Never" />
              <MenuItem value={2} primaryText="Every Night" />
              <MenuItem value={3} primaryText="Weeknights" />
              <MenuItem value={4} primaryText="Weekends" />
              <MenuItem value={5} primaryText="Weekly" />
          </SelectField>
        </div>
      </MuiThemeProvider>
    );
  }

【讨论】：

谢谢弗拉德，我确认它运行良好，没有延迟。

【解决方案2】：

检测 React Material UI Select Field 是否展开

答案可在 Materia-UI Select-API 文档中找到。
链接：https://material-ui.com/api/select/

【讨论】：