Question

我正在尝试确定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调用，而是在200ms之后cca，尽管MenuItems不再可见。

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

这是SelectField展开时的样子：

这里已经崩溃了：

Answer 1

检测 React Material UI 选择字段是否展开

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

Answer 2

为了更好地处理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>
    );
  }

如何检测是否展开了React Material UI Select Field？

2 个答案: