RangeInput.jsx 697 B

1234567891011121314151617181920212223242526272829303132
  1. import React from "react";
  2. class RangeInput extends React.Component {
  3. constructor(props) {
  4. super(props);
  5. this.state = {
  6. value: '',
  7. };
  8. }
  9. inputChange = (e) => {
  10. this.setState({value: e.target.value});
  11. };
  12. render() {
  13. const {min, max} = this.props;
  14. const hasError = this.state.value.length > max || this.state.value.length < min;
  15. return (
  16. <div>
  17. <input onChange={this.inputChange} className={hasError ? 'error' : ''}/>
  18. </div>
  19. );
  20. }
  21. }
  22. const RangeInputParent = () => {
  23. return(
  24. <RangeInput min={2} max={10} />
  25. )
  26. }
  27. export default RangeInputParent