reactjs - 如何检测 React Material UI 选择字段是否展开？

Question

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

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

<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 不再可见。

Select field 菜单可以通过点击展开，当展开时，它会在某些菜单项被点击时隐藏，或者用户在菜单外点击时隐藏。

这是展开时 SelectField 的样子:

这里是折叠的:

Answer 1

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

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

通过使用这个 Prop ，我们可以传递给 DropDownMenu 组件 onClose 带有处理函数的 Prop ，它将在 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>
    );
  }