reactjs - Material-ui中显示popper时如何保持对输入字段的关注

Question

我想在输入字段上添加接受和拒绝按钮，这些按钮仅在用户专注于输入字段时才会出现。类似于我们在 Jira 中得到的。

我尝试使用 material-ui 创建一个类似的组件。问题是，当我专注于输入字段时，它会显示这两个按钮，但后来我无法在输入框中输入。

有人可以帮我吗？下面是一个代码沙箱： https ://codesandbox.io/s/material-demo-2hrc4?file=/demo.tsx

Answer 1

我能够使用 ButtonGroup 和条件渲染（而不是弹出框）来做你想做的事情。我的猜测是 Popover 有一些 z-index 可能是因为我们无法在输入中输入任何内容，对此并不完全确定。

检查它是否适合您 - https://codesandbox.io/s/material-demo-sgpt6?file=/demo.tsx

你也忘了处理你的输入状态 -

     <FilledInput
        id="filled-adornment-weight"
        value={value}
        aria-describedby="filled-weight-helper-text"
        inputProps={{
          "aria-label": "weight"
        }}
        onFocus={handleClick}
        onChange={e => setValue(e.target.value)} //set value//
      />