https://github.com/onface/react-composition
Package react composition
https://github.com/onface/react-composition
Last synced: about 2 months ago
JSON representation
Package react composition
- Host: GitHub
- URL: https://github.com/onface/react-composition
- Owner: onface
- Created: 2016-09-28T09:11:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-16T06:10:51.000Z (about 7 years ago)
- Last Synced: 2025-03-24T11:21:30.868Z (2 months ago)
- Language: JavaScript
- Size: 292 KB
- Stars: 31
- Watchers: 1
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-composition
> 解决 React 中文输入法导致的 ni'hao 数据更新问题
- Online: https://onface.github.io/react-composition/
---
- [doc](./doc/)
## 安装
```shell
npm i react-composition --save
```
## 输入文字和最终文字
````html
````
````js
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 (
state.finalValue: {self.state.finalValue}
state.value: {self.state.value}
)
}
})
ReactDOM.render(, document.getElementById('demo'))
````
## 字数最大限制
````html
````
````js
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 (
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}
)
}
})
ReactDOM.render(, document.getElementById('max'))
````
## 即时搜索
````html
````
````js
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 (
AJAX log:
{
self.state.ajaxLogs.map(function (item, key) {
return (
{item}
)
})
}
)
}
})
ReactDOM.render(, document.getElementById('search'))
````