环境
1:react 15.5.0
2:antd 2.13.7
3:chrome 64
在使用antd的Input控件时由于控制了输入字符串的长度,导致在输入汉字时不能正确输入。
原因:在OnChange事件中不能准确获得输入的文字字符串,如果使用输入法输入汉字,
会被识别为一连串英文字符串。
三个事件的触发时间分别为:输入开始时,输入进行中,和输入完成时。需要注意
前2个事件都在onChange之前触发,onCompositionEnd是在onChange之后触发。
另外如果直接输入完成是不会触发这三个事件的,只有onChange事件。比如直接输入英文。如果input的value没有变化也不会触发onCompositionStartEnd事件
代码如下:
handleComposition = (e) => { console.log(e.type + ": " + e.target.value); if (e.type === 'compositionend') { // composition is end const value = e.target.value; this.setState({ isOnComposition: false },()=>{ // this.handleFixedChange(value); }); } else { // in composition this.setState({ isOnComposition: true }); } } handleFixedChange = (inputValue)=>{ console.log("onChange" + ": " + inputValue); //保存value this.informParentChange(inputValue); } <Input onChange={(e)=>this.handleFixedChange(e.target.value)} onCompositionStart = {this.handleComposition} onCompositionUpdate = {this.handleComposition} onCompositionEnd = {this.handleComposition} {...newProps} value={this.props.value} />