Reactjs 如何检测反应物料界面选择字段是否展开？

我试图确定是否展开，即下拉列表及其菜单项是否可见

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

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

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

单击“选择字段”菜单可将其展开，展开时，单击某些菜单项或用户在菜单外单击时，它将隐藏

这是SelectField展开时的外观：

这里是倒塌的：

---

要更好地处理

选择字段

关闭事件，您可以使用属性

下拉菜单uprops

：

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

通过使用此道具，我们可以通过处理程序功能传递到

下拉菜单
组件
onClose
道具，该道具将在
下拉菜单关闭后立即启动（由ESC、外部单击或项目选择引起）。不幸的是，
下拉菜单
组件没有提供类似的道具来确定开口，因此唯一的方法（没有
扩展组件）是使用
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>
    );
  }

onSelectClose=（）=>{
控制台日志（“关闭”）
}
onSelectOpen=（）=>{
控制台日志（“打开”）
}
render（）{
返回(
);
}
谢谢你，弗拉德，我确认它能立即正常工作。
  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>
    );
  }