為什么setTimeout中的輸入setState會中斷中文IME？

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；