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//
      />

Answer 2

我认为这可以帮助遇到同样问题的人。

//functions and other stuffs

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

      <Popover
        id="simple-popover"
        open={open}
        onClose={handleClose}
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "center"
        }}
        disableAutoFocus
        disableEnforceFocus
        disableRestoreFocus
      >
    /*Popover content */
</Popover>

这是@Atin Singh 的 codesandbox 的分支 https://codesandbox.io/s/material-demo-forked-dyki7k?file=/demo.tsx

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

How to maintain a focus on Input field when popper is shown in Material-ui

reactjs

material-ui

react-hook-form