【问题标题】:How to maintain a focus on Input field when popper is shown in Material-uiMaterial-ui中显示popper时如何保持对输入字段的关注
【发布时间】:2020-05-02 20:07:33
【问题描述】:

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

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

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

【问题讨论】:

    标签: reactjs material-ui react-hook-form


    【解决方案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//
          />
    

    【讨论】:

    • 哦,太棒了。这正是我想要实现的目标。非常感谢您的快速回复。
    • @Mahesh 很高兴能提供帮助。 :D
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-15
    • 2020-05-01
    • 1970-01-01
    • 2015-07-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多