react 受控输入中的撤销行为无法按预期工作,

bjg7j2ky  于 5个月前  发布在  React
关注(0)|答案(6)|浏览(68)

你想要请求一个功能还是报告一个bug?

报告一个bug

当前的行为是什么?

  1. 加载 https://codesandbox.io/s/material-demo-8wgfs
  2. 将焦点放在第一个输入框上。
  3. 输入a。
  4. 按Tab键将焦点放在第二个输入框上。
  5. 输入a。
  6. 使用Ctrl/Cmd+Z或Edit->Undo撤销这两个更改。
    注意,不可控的输入更改被恢复了
    注意,可控制的输入更改没有被恢复

预期的行为是什么?

不可控和可控制的输入表现相同。

这个问题影响了哪些版本的React,以及哪些浏览器/操作系统?在之前的React版本中是否可以正常工作?

React 16.12.0
Chrome 78.0.3904.108
macOS 10.14.6
首次报告于 mui/material-ui#18545

bwleehnv

bwleehnv1#

我无法复现这个问题。也许我做错了什么。
在Mac和Windows 10的Chrome浏览器上,我使用标签页选择之前的输入。
文档:
受控组件。
真实来源来自React。
https://reactjs.org/docs/forms.html#controlled-components
非受控组件
真实来源在DOM中。
Undo/Redo
Undo/Redo 是应用在onChange事件上的。我已经创建了一个简单的受控与非受控的示例,当我控制台输出当Undo/Redo被应用时会发生什么。

7gyucuyw

7gyucuyw2#

感谢kunukn查看。在我能够进行基准测试的情况下,焦点处理程序中的设置状态是问题的原因(我使用了Cmd+Z)。

iszxjhcz

iszxjhcz3#

这个问题已经被自动标记为过时,因为它最近没有活动。如果不再发生活动,它将被关闭。感谢您的贡献。

nhjlsmyf

nhjlsmyf4#

关闭长时间不活跃的问题。如果此问题仍在最新版本中存在,请创建一个带有最新信息的新问题。谢谢!

txu3uszq

txu3uszq5#

感谢kunukn查看这个问题。在我可以进行基准测试的情况下,焦点处理程序中的setState是问题的根源(我使用了Cmd+Z)。
我在开发一个表单验证库时遇到了这个问题(实际上我是用一些你的输入组件和其他组件来测试它的),似乎任何在change事件之外触发的状态更改都会破坏撤销/重做功能(除了Firefox,即使是最简单的受控输入,它也会失效)。
我甚至尝试通过手动分派一个change事件来修改原生输入值的原型值设置器,以获得相同的结果。
我发现的唯一有趣的事情是,在某些浏览器(我记得基于WebKit的浏览器)中,当撤销与当前聚焦的不同类型的输入时,focus事件(例如,空字符串)会在event.target.value下给出正确的撤销值,但随后会立即被上一个值覆盖(然而,有时光标会跳到正确的撤销位置,即使值没有改变)。
在一些非常罕见、可能是随机的情况下,我发现在尝试撤销时,之前的输入值甚至会被复制。比如“Test”变成“TestTest”。
我认为React输入实现应该进行修订。同时,请考虑修改#9567

r6hnlfcb

r6hnlfcb6#

@oliviertassinari@ernestostifano 你能确认这仍然是一个问题吗?

相关问题