javascript - 输入onChange时重音并延迟React的setState

我正在创建一个小工具，需要在其中调用调用输入setState处理程序触发的下一个刻度的onChange。下面是显示基本概念的简单代码段。

https://jsfiddle.net/samuelsimoes/q3p44sz1/

class MyComponent extends React.Component {
  constructor () {
    super(...arguments);
    this.state = {};
  }

  onChange (value) {
    setTimeout(v => {
      this.setState({ name: v });
    }.bind(this, value), 0);
  }

  render () {
    return (
      <div>
        <input
          type="text"
          value={this.state.name}
          onChange={evt => this.onChange(evt.target.value)} />
      </div>
    );
  }
};

ReactDOM.render(
  <MyComponent/>,
  document.getElementById("app-container")
);

如果您在Mac OS的浏览器中运行此代码段，并尝试输入带有重音符号的字母，则会在每个浏览器上出现不同的尴尬行为。在不再使用该重音符号后，该重音符号仅在Chrome上才有效（请看下面的gif）。在Firefox上，不显示重音符号和字母。



你们对此有任何线索吗？

ps：我在React 0.13、0.14和15.0.2上测试了此行为。

最佳答案

基本上，您不应该推迟setState。在这种情况下，React无法正常工作。

看：https://github.com/facebook/react/issues/6563

怎么了：

假设您按字母A。


当您在字段中触发onChange时，React将处​​理所有状态突变。
状态更改过程之后，React执行DOM diff更新组件，并且在此阶段该字段的状态值为空值，因此React执行node.value = ""。
在下一个刻度上，我们将延后的setState应用于字母A和node.value = "A"。


此行为破坏了MacOS上的浏览器，在该浏览器中，浏览器将“中间状态”上的重音替换为键入的重音，从而阻止用户键入重音字符。

因此，遗憾的是没有解决方案。

关于javascript - 输入onChange时重音并延迟React的setState，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37266601/