时间戳

首页 > 解决方案 > Material UI Popper over TextField如何在选择popper选项时保持popper打开

reactjs - Material UI Popper over TextField如何在选择popper选项时保持popper打开

问题描述

我正在使用 React Material UI，并且我有一个 Textfield，如果我专注于它，它将部署一个带有简单菜单的 Popper。如果 Textfield 失去焦点，那么 Popper 会自行关闭。问题是我需要在不关闭 Popper 的情况下从菜单中选择任何选项，但是当我这样做时，Textfield 会失去焦点。我需要的是仅当我在文本字段或菜单之外单击时才保持 Popper 开启。

一切都在这个代码框上。

我试过这个：

const selected = prop => {
   console.log(prop);
}

...

        <Paper elevation={3} className={classes.paper}>
          <MenuList>
            <MenuItem onClick={() => selected('first')}>
              First Option
            </MenuItem>
            <MenuItem onClick={() => selected('next')}>
              Next Option
            </MenuItem>
            <MenuItem onClick={() => selected('last')}>
              And Last Option
            </MenuItem>
          </MenuList>
        </Paper>
      </Popper>

还尝试ClickAwayListener包装两个组件，TextField 和 Popper：

<ClickAwayListener onClickAway={blur}>
  <>
    <TextField ... />
    <Popper ...>
     ...
    </Popper>
  </>
</ClickAwayListener>

两次都不成功...我怎样才能做到这一点？

标签： reactjsmaterial-ui

解决方案

尽管@Dekel 的解决方案运行良好。但在我看来，如果我们使用 React.useRef() 来关注文本字段会更好。

这是更新的解决方案链接： https ://codesandbox.io/s/goofy-frost-bb88l?file=/src/MyApp.js

const textFieldRef = React.useRef();

内部返回()

<TextField
  aria-describedby={id}
  onFocus={focus}
  onBlur={blur}
  placeholder="Focus on me"
  inputRef={textFieldRef}
/>

选择任何菜单列表项

const selected = event => {
  console.log("Selected ", event.target.innerText);
  textFieldRef.current.focus();
};

推荐阅读