react-composition
解决 React 中文输入法导致的 ni'hao 数据更新问题
安装
npm i react-composition --save
输入文字和最终文字
<div id="demo"></div>
var React = require('react')var ReactDOM = require('react-dom')var reactComposition = require('react-composition')var App = React.createClass({ getInitialState: function() { var value = '123' return { value: value, finalValue: value } }, render: function() { var self = this return ( <div> state.finalValue: {self.state.finalValue} <br /> state.value: {self.state.value} <br /> <input type="text" {...reactComposition({ onChange: function (event) { var value = event.target.value if (event.reactComposition.composition === false) { self.setState({ finalValue: value }) } self.setState({ value: value }) } /* , onCompositionStart: function (event) {}, onCompositionUpdate: function (event) {}, onCompositionEnd: function (event) {} */ // 若要监听原生的 onCompositionStart|Update|End 事件 // 需在 reactComposition(settings) 的 settings 中绑定回调函数 })} value={self.state.value} /> </div> ) }})ReactDOM.render(<App />, document.getElementById('demo'))
字数最大限制
<div id="max"></div>
var React = require('react')var ReactDOM = require('react-dom')var reactComposition = require('react-composition')var App = React.createClass({ getInitialState: function() { var value = '123' return { value: value, finalValue: value } }, render: function() { var self = this return ( <div> <input type="text" {...reactComposition({ onChange: function (event) { var value = event.target.value if (event.reactComposition.composition === false) { if (value.length > self.props.max) { value = value.slice(0, self.props.max) } self.setState({ finalValue: value }) } self.setState({ value: value }) } /* , onCompositionStart: function (event) {}, onCompositionUpdate: function (event) {}, onCompositionEnd: function (event) {} */ // 若要监听原生的 onCompositionStart|Update|End 事件 // 需在 reactComposition(settings) 的 settings 中绑定回调函数 })} value={self.state.value} /> {this.state.finalValue.length}/{self.props.max} </div> ) }})ReactDOM.render(<App max={10} />, document.getElementById('max'))
即时搜索
<div id="search"></div>
var React = require('react')var ReactDOM = require('react-dom')var reactComposition = require('react-composition')var App = React.createClass({ getInitialState: function() { var value = '123' return { value: value, finalValue: value, ajaxLogs: [] } }, render: function() { var self = this return ( <div> <input type="text" {...reactComposition({ onChange: function (event) { var value = event.target.value if (event.reactComposition.composition === false) { self.setState({ finalValue: value }) // You can send ajax var log = 'GET /search?keyword=' + value var ajaxLogs = self.state.ajaxLogs ajaxLogs.unshift(log) self.setState({ ajaxLogs: ajaxLogs }) } self.setState({ value: value }) } /* , onCompositionStart: function (event) {}, onCompositionUpdate: function (event) {}, onCompositionEnd: function (event) {} */ // 若要监听原生的 onCompositionStart|Update|End 事件 // 需在 reactComposition(settings) 的 settings 中绑定回调函数 })} value={self.state.value} /> <pre> <code>AJAX log:</code> { self.state.ajaxLogs.map(function (item, key) { return ( <div key={key} > <code >{item}</code> </div> ) }) } </pre> </div> ) }})ReactDOM.render(<App />, document.getElementById('search'))