React Native 中 TextInput 组件和中文输入冲突

本文主要是介绍React Native 中 TextInput 组件和中文输入冲突，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文转载自我的 Github 博客

在用 React Native (下称 RN) 开发面向国人的应用时，不可避免会有用户使用中文输入法的情景。在 RN 中，负责输入内容的控件是 <TextInput>，但这个组件有一个截止至 0.41.2 版本都还存在的中文显示 bug。类似的行为在使用英文输入法时并不会出现，所以我在 GitHub 提交了一个~~没人理的~~ issue #12599。

复现

完整最小化复现代码在这里。现在只展示 render() 中代码，用于最小化复现，新建一个项目后修改 index.ios.js 即可。

render () {return (<View style={styles.container}><TextInputstyle={styles.inputField}value={this.state.text}placeholder="Type here to translate!"onChangeText={(text) => this.setState({ text })} /><Text style={styles.previewText}>{this.state.text}</Text><TextInput style={styles.inputField} placeholder="Another to focus, meaningless" /></View>);
}

猜测原因

这个问题一开始确实比较令人费解，但用一个 <Text> 组件显示了 this.state 内部的内容后，发现了问题可能存在部分—— <Text> 中的文本来源于 this.state.text，而在输入框中文本消失后，<Text> 中的文本并没有一起消失，即我们应该是成功的设置了 this.state.text 的内容，但出于某些原因，输入框的显示有一些问题。

尝试为各个可能涉及更新 this.state 操作的 props 增加了回调用于输出 this.state 内容。操作和 console 中输出的结果如动图。

repro2

render () {return (<View style={styles.container}><TextInputstyle={styles.inputField}value={this.state.text}placeholder="Type here to translate!"onBlur={(evt) => console.log('onBlur event:', evt.nativeEvent.text)}onChange={(evt) => console.log('onChange event:', evt.nativeEvent.text)}onChangeText={(text) => this.setState({ text })}onSubmitEditing={(evt) => console.log('onSubmitEditing event:', evt.nativeEvent.text)}onEndEditing={(evt) => console.log('onEndEditing event:', evt.nativeEvent.text)} /><Text style={styles.previewText}>{this.state.text}</Text><TextInput style={styles.inputField} placeholder="Another to focus, meaningless" /></View>);
}

可以看出 onBlur 和 onEndEditing 对应的两个回调并没有输出我们预期的结果，而 RN 内部似乎在这一步用 evt.nativeEvent.text 来设定了 <TextInput> 的显示值（也许是 value的值，我没有仔细探究）。

解决办法

知道了是 onBlur 和 onEndEditing 出的问题后，基本可以确定在这一部分加一些 patch 来处理。目前来看在我遇到的情况中 onBlur 和 onEndEditing 是被一起触发的，所以在其中之一进行修复即可。问题可能是 onEndEditing 触发后，我们的 <TextInput> 并未如预期一样更新显示的值（即 props 里的 value ），我们希望利用 state 的变化来强制 <TextInput> 重新渲染。

onEndEditing={(evt) => this.setState({ text: evt.nativeEvent.text })} 这一行的引入可以解决这个问题（同时还更改了 onChange 的回调，稍后说明）。

render () {return (<View style={styles.container}><TextInputstyle={styles.inputField}value={this.state.text}placeholder="Type here to translate!"onChange={(evt) => this.setState({ text: evt.nativeEvent.text })}onChangeText={(text) => setTimeout(() => {this.setState({ text: text })})}onEndEditing={(evt) => this.setState({ text: evt.nativeEvent.text })} /><Text style={styles.previewText}>{this.state.text}</Text><TextInput style={styles.inputField} placeholder="Another to focus, meaningless" /></View>);
}