繁体   English   中英

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

Why does input setState inside setTimeout break Chinese IME?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我在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如何将操作推送到队列的后面?

非常感谢!

2 个回复

尝试这个。 不建议在用户输入事件处理程序函数中执行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的更多详细信息

 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;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题
 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM