Question

我在React中有一个简单的受控输入组件，我正在努力解决这个问题。

如果我以正常方式进行操作，则一切正常，并且IME可以按预期运行：

<input
  type="text"
  value={this.state.value}
  onChange={(event) => {
    this.setState({ value: event.target.value });
  }}
/>

但是，如果我将setTimeout或另一个setState包装在外面，则中文IME不再起作用，似乎在每个setState期间它都已中断？

# setTimeout
<input
  type="text"
  value={this.state.value}
  onChange={(event) => {
    const value = event.target.value;
    setTimeout(() => {
      this.setState({ value });
    }, 0);
  }}
/>

# another setState
<input
  type="text"
  value={this.state.value}
  onChange={(event) => {
    const value = event.target.value;
    this.setState({ isTyping: true }, () => {
      this.setState({ value });
    });
  }}
/>

我不是在寻找使中文IME工作的正确方法，我只是觉得这很有趣，并且想了解是什么原因导致了这种行为。我有点理解每个setState操作都有一个“更新循环”，但是我不确定这将如何破坏中文IME。这与事件循环以及setTimeout如何将操作推到队列的后面有关吗？

非常感谢！

Answer 1

尝试一下。不建议在用户输入事件处理程序函数中执行setTimeout。不要使用设置状态的setTimeout

   handleChange = event = > {
         const value = event.target.value;
         this.setState({ value });
  }

   <input
     type="text"
     value={this.state.value}
   onChange={event => this.handleChange(event)}
  />

即使是0毫秒，setTimeout也会延迟设置用户输入。检查以下线程，以获取有关使用setTimeout和零毫秒的更多详细信息

Answer 2

 I checked your code amd I didn't found any issue on your code. 
 My react version is 16.6 and your code work fine on my machine.

import React from 'react';
class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
          value: ''
      }
   }

   onClick() {
       this.setState({ showLazy: !this.state.showLazy });
   }

   render() {

    return (<div>
              <input
                type="text"
                value={this.state.value}
                onChange={(event) => {
                   const value = event.target.value;
                   this.setState({ isTyping: true }, () => {
                       this.setState({ value });
                   });
               }}
             />
            <input
               type="text"
               value={this.state.value}
               onChange={event => {
                     const value = event.target.value;
                     setTimeout(() => {
                        this.setState({ value })
                     }, 0);
              }}
           />
       </div>)
  }
}

导出默认的AdvanceApp;

为什么setTimeout中的输入setState会中断中文IME？

2 个答案: