diff options
Diffstat (limited to 'src/components/Input.js')
| -rw-r--r-- | src/components/Input.js | 65 |
1 files changed, 10 insertions, 55 deletions
diff --git a/src/components/Input.js b/src/components/Input.js index 1d66214..f621b43 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -1,61 +1,16 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import s0 from './Input.module.scss'; -class Input extends Component { - static propTypes = { - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - type: PropTypes.string, - onChange: PropTypes.func, - name: PropTypes.string, - placeholder: PropTypes.string - }; - - static defaultProps = { - type: 'number', - placeholder: 'Please input' - }; - - state = { - value: this.props.value, - lastValueFromProps: this.props.value - }; - - static getDerivedStateFromProps(props, state) { - if (props.value !== state.lastValueFromProps) { - return { - lastValueFromProps: props.value, - value: props.value - }; - } - return null; - } - - handleInputOnChange = e => { - const value = e.target.value; - const int = parseInt(value, 10); - if (int < 0 || int > 65535) return; - this.setState({ value: e.target.value }); - }; - - render() { - const { onChange, name, type, placeholder } = this.props; - const { value } = this.state; - return ( - <div> - <input - className={s0.input} - name={name} - type={type} - placeholder={placeholder} - value={value} - onBlur={onChange} - onChange={this.handleInputOnChange} - /> - </div> - ); - } +export default function Input(props) { + return <input className={s0.input} {...props} />; } -export default Input; +Input.propTypes = { + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + type: PropTypes.string, + onChange: PropTypes.func, + name: PropTypes.string, + placeholder: PropTypes.string +}; |
