README_CH.md

react-composition-input

针对中文、日语等需要输入法组词的语言进行优化的输入框。

Demo

用法

npm install --save react-composition-input

import CInput from 'react-composition-input';

class App extends Component {
  render() {
    return (
      <CInput onInputChange={this.handleInputChange} />
    );
  }
}

例子 & 开发

npm install
npm start

Why

当我们用中文打字的时候，我们会需要输入法帮我们组词。但是输入框并不会等我们组词完毕之后才触发change事件，这样会导致每次输入一个字母输入框的change就会触发一次。

但还好我们的DOM3规范有compositionstart和compositionend事件，我们可以通过一个变量标记输入时是否是组词状态。只要使用react-composition-input，onInputChange回调函数只会在compositionend事件触发后被调用。

你可以看下面两个gif图，左边是原生的input，在输入ceshi时搜索的函数已经被调用，右侧是使用react-composition-input，只有等到测试组词完毕后搜索才被调用。

你还可以看下尤雨溪的文章了解更多细节.

#更新 我发现不仅是有些浏览器触发composition和input事件的顺序不一样，用不同的输入法也能造成不同的结果。比如在iOS上如果你用原生的键盘去输入，input事件是在composition之前触发的，而如果你用Google键盘的话，你会发现composition事件从来都不会触发，input事件只会在组词结束后触发（虽然这样挺好但不符合规范）。

所以我用了另一种策略来对付这种不兼容问题，在1.0.4版本以上iOS的这种情况将被兼容。

1.1.0版本之后，我们可以通过设置value作为props控制CInput的值，感谢luylin的PR！

Q & A

为什么要检测是否是Chrome并在compositionend事件触发后再次调用onInputChange?

Chrome v53之后，compositionend事件被改成了在textInput事件之后再触发，这造成compositionend事件触发了，但是onInputChange没有被调用，所以我们针对Chrome需要再一次调用onInputChange，在其他的大部分浏览器，textInput都是在compositionend之后触发的。

你可以查阅chromium的源码了解更多细节。

为什么用Parcel来打包？

因为用Parcel来开发组件的demo页真是太爽了，但这并不影响你用什么打包器去开发你的项目，因为库代码都是由Babel生成的。