【React】compositionend事件不触发

实现input输入框输入中文时不改变value值的效果，但是输入中文结束时compositionend不会触发；

已经google搜索了相关问题；

浏览器：Chrome 73.0.3683.86 (64-bit)；

输入法：win10系统输入法

import React from "react";
import ReactDOM from "react-dom";
class InputBox extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
this.state = {
isOnComposition: false,
value: ""
};
}
handleComposition = e => {
console.log(e.type);
if (e.type === "compositionend") {
console.log(e.target.value);
this.setState({ isOnComposition: false }, () => {
this.handleFixedChange(e.target.value);
});
} else {
this.setState({ isOnComposition: true });
}
};
handleFixedChange = v => {
if (!this.state.isOnComposition) {
this.setState({
value: v
});
}
};
render() {
return (
<input
value={this.state.value}
onCompositionStart={this.handleComposition}
onCompositionUpdate={this.handleComposition}
onCompositionEnd={this.handleComposition}
onChange={e => {
this.handleFixedChange(e.target.value);
}}
ref={this.inputRef}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<InputBox />, rootElement);

回答

ios也遇到这个问题，楼主解决了吗

compositionend 事件是在onChange触发后才会出现的，
需要修改 handleFixedChange 方法

handleFixedChange = v => {
    /*
    if (!this.state.isOnComposition) {
      this.setState({
        value: v
      });
    }
    */
    this.setState({
        value: v
    });
  };

如果是用来验证输入内容长度的，可以考虑用onKeyUp验证，并截取指定的长度。

以上是 【React】compositionend事件不触发 的全部内容， 来源链接： utcz.com/a/75851.html

回到顶部