javascript - 在输入 onChange 上强调和延迟 React 的 setState

Question

我正在创建一个小实用程序，我需要调用一个 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 上，不会显示重音符号和字母。

你们有什么线索吗？

p.s.:我在 React 0.13、0.14 和 15.0.2 上测试了这个行为。

Answer 1

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

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

发生了什么:

假设您按下字母 A。

1. 当您在字段中触发 onChange 时，React 会处理所有状态变化。

2. 在状态突变过程之后，React 执行 DOM 差异来更新组件，在此阶段该字段的状态值为空值，因此 React 执行 node.value = "".

3. 在下一次报价中，我们的延迟 setState 被触发，应用字母 A 和 node.value = "A"。

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

很遗憾，没有解决方案。