美文网首页
react-native 中文输入法冲突

react-native 中文输入法冲突

作者: 拌着生活 | 来源:发表于2018-10-22 20:30 被阅读0次

最近一直在做RN开发,遇到了不少坑,昨天碰到一个中文输入冲突。
## 原因
我用的RN版本是:0.54.0,先上代码,最常用 最简单的写法

<TextInput
    defaultValue={this.state.text}
    onChangeText={(text) => {
      this.setState({ text });
  }}
/>

通过onChangeText 获取到输入值,然后赋值给state,组件重新render,页面重绘,嗯~~ web端常用的方法。
但是RN上切换中文输入法,发现无法输入中文。因为每输入一个字母,没等到输入中文,页面就开始重绘。(IOS端会出现此问题)

使用onEndEditing代替 onChangeText

翻阅RN文档发现textInput 有 onEndEditing 方法,文档解释该方法为 当文本输入结束后调用此回调函数。
修改后的代码

<TextInput
    defaultValue={this.state.text}
    onEndEditing={(evt) => {
      this.setState({ text:evt.nativeEvent.text });
    }}
/>

相关文章

网友评论

      本文标题:react-native 中文输入法冲突

      本文链接:https://www.haomeiwen.com/subject/jrhszftx.html