react-composition

解决 React 中文输入法导致的 ni'hao 数据更新问题

• Online: https://onface.github.io/react-composition/

• doc

安装

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'))