react输入框输入中文bug
Posted 北辰狼月
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react输入框输入中文bug相关的知识,希望对你有一定的参考价值。
一般来说,react上我们都会用change事件去处理input的输入,但这样就导致一个问题,在输入中文的时候,我们还没输入完成就会触发change事件,这样显然不是理想状况。
那么,怎么解决这个问题呢?首先,你需要了解3个事件,compositionstart,compositionupdate和compositionend。什么意思呢?
compositionstart
要开始输入中文
compositionupdate
插入新字符
compositionend
输入完成
下面是一段代码,可以copy试一下
class App extends React.Component {
constructor(props) {
super(props)
}
compositionstart(event) {
console.log(‘开始输入‘, event.data);
}
compositionupdate(event) {
console.log(‘正在输入的数据‘, event.data);
}
compositionend(event) {
console.log(‘结束输入‘, event.data);
}
changeEvent() {
console.log(‘改变‘);
}
render() {
return (
<div>
<input type="text" id="test" onChange={this.changeEvent.bind(this)}
onCompositionStart={this.compositionstart.bind(this)}
onCompositionUpdate={this.compositionupdate.bind(this)}
onCompositionEnd={this.compositionend.bind(this)}/>
</div>
)
}
}
window.onload = function () {
ReactDOM.render(
<App/>,
document.getElementById(‘root‘)
)
}
需要注意的是,要引入react和babel
明白这几个事件之后,怎么办呢?看这里
var isOnComposition = true;
const isChrome = !!window.chrome && !!window.chrome.webstore
class App extends React.Component {
constructor(props) {
super(props)
}
handleComposition(e) {
console.log(‘type‘, e.type)
if (e.type === ‘compositionend‘) {
// composition is end
isOnComposition = false
if (!isOnComposition && isChrome) {
// fire onChange
this.changeEvent(e);
}
} else {
// in composition
isOnComposition = true
}
}
changeEvent() {
if (!isOnComposition) {
console.log(‘改变‘);
}
}
render() {
return (
<div>
<input type="text" id="test" onChange={this.changeEvent.bind(this)}
onCompositionStart={this.handleComposition.bind(this)}
onCompositionUpdate={this.handleComposition.bind(this)}
onCompositionEnd={this.handleComposition.bind(this)}/>
</div>
)
}
}
window.onload = function () {
ReactDOM.render(
<App/>,
document.getElementById(‘root‘)
)
}
我们定义一个中间变量isOncomposition,默认为true,当触发compositionend事件时,我们把它赋为false,这样change事件才会执行自己的方法。需要注意的是在chrome浏览器中,change方法会先于compositionend事件执行,这样的话在最后,change方法执行完成之后,才会执行compositionend中的方法,将isOncomposition设为false。这样就不会执行change的方法了。怎么办呢?就是在compositionend中加一个判断!isOnComposition && isChrome,只有当chrome浏览器,才会在compositionend结束,执行change的方法。
github地址如下,欢迎大家查看
react-input
以上是关于react输入框输入中文bug的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript 实现textarea限制输入字数, 输入框字数实时统计更新,输入框实时字数计算移动端bug解决
react给input元素中文输入的时候自动转成字符串bug
Bug - 文本框oninput事件,在中文输入法状态多次触发