项目作者: VovanR

项目描述 :
React decrement/increment input component
高级语言: JavaScript
项目地址: git://github.com/VovanR/react-decinc.git
创建时间: 2016-04-07T15:15:55Z
项目社区:https://github.com/VovanR/react-decinc

开源协议:MIT License

下载


react-decinc

Commitizen friendly
XO code style

NPM version
Build Status
Dependency Status
DevDependency Status

React decrement/increment input component

Demo: vovanr.github.io/react-decinc

Install

  1. npm install --save react-decinc

Usage

See: example

  1. class App extends React.Component {
  2. constructor() {
  3. super();
  4. this.state = {
  5. count: 33,
  6. gramm: 0.15
  7. };
  8. this.handleChangeCount = this.handleChangeCount.bind(this);
  9. this.handleChangeGramm = this.handleChangeGramm.bind(this);
  10. }
  11. handleChangeCount(value) {
  12. this.setState({count: value});
  13. }
  14. handleChangeGramm(value) {
  15. this.setState({gramm: value});
  16. }
  17. render() {
  18. return (
  19. <div
  20. style={{
  21. fontSize: '500%',
  22. fontFamily: 'monospace'
  23. }}
  24. >
  25. <div>
  26. <label>
  27. <small>{'Count: '}</small>
  28. <DecInc
  29. className="dec-inc_theme_example"
  30. value={this.state.count}
  31. max={33}
  32. min={0}
  33. onChange={this.handleChangeCount}
  34. ></DecInc>
  35. </label>
  36. </div>
  37. <div>
  38. <label>
  39. <small>{'Gramm: '}</small>
  40. <DecInc
  41. className="dec-inc_theme_example"
  42. value={this.state.gramm}
  43. min={0}
  44. step={0.001}
  45. onChange={this.handleChangeGramm}
  46. ></DecInc>
  47. </label>
  48. </div>
  49. </div>
  50. );
  51. }
  52. }
  53. ReactDOM.render(<App></App>, document.getElementById('app'));

Api

  1. DecInc.propTypes = {
  2. value: React.PropTypes.number,
  3. min: React.PropTypes.number,
  4. max: React.PropTypes.number,
  5. step: React.PropTypes.number,
  6. disabled: React.PropTypes.bool,
  7. className: React.PropTypes.string,
  8. onChange: React.PropTypes.func
  9. };
  10. DecInc.defaultProps = {
  11. step: 1,
  12. disabled: false
  13. };

License

MIT © Vladimir Rodkin