An input component optimized for languages which need composition such as Chinese, Japanese etc.
npm install react-composition-input
npm install --save react-composition-input
``javascript
import CInput from 'react-composition-input';
class App extends Component {
render() {
return (
);
}
}
`Example & Development
`bash`
npm install
npm start
event emits before the composition is finished. Which is not what we expect. And frequently calling onChange function may affect page performance.According to DOM3 spec, composition events can help us avoid emitting
onChange event before the composition event is finished. We can use a variable to tag the status of a composition. By using react-composition-input, the onInputChange callback will only be called after compositionend event is emitted.You can see the difference through the gif below.
!original_input!optimized_input
You can read this article by Evan You to know more about DOM composition event.
Update
I find that some IME also behaves differently on composition event. If you use Apple native keyboard on iOS, the onInput event is emitted before the composition event. If you use Google keyboard instead, the composition event will never be emitted. The onInput event will only be emitted when the composition is over(which is a good thing but not a standard thing).So I change the way to detect the sequence of event firing. To make it more compatible for most situations.
After
1.1.0, you can set value as props to control the value in CInput. Thanks for the PR from luyilin.Q & A
$3
After Chrome v53, the compositionend event is emitted after textInput event. It causes that compositionend event emitted but onInputChange function is not be called. So we need to call onInputChange` for another time.You can see the source code of chromium for more details.