diff --git a/14-form-validation/a-validation/src/App.js b/14-form-validation/a-validation/src/App.js index e0bb362..921090f 100644 --- a/14-form-validation/a-validation/src/App.js +++ b/14-form-validation/a-validation/src/App.js @@ -2,80 +2,83 @@ import React, { Component } from 'react'; import './App.css'; import '../node_modules/purecss/build/base.css'; import '../node_modules/purecss/build/forms.css'; + class Field extends Component { - static defaultProps = { - value: '', - type: 'text' - } - state = { - invalidmsg: this.props.invalidmsg, - value: this.props.value - } - render () { - const { - name, - id = name, - label, - onChange - } = this.props; - const { value, invalidmsg } = this.state; - const inputProps = { - ...this.props, - id, - value, - onChange: (e) => this.handleChange_onChange(e, onChange) - }; - return ( -
- - - { - invalidmsg ? - {invalidmsg} : - null - } -
- ); - } - handleChange_onChange (e, onChange) { - this.setState({ - value: e.target.value - }); - this.validateField(e); - if (onChange && typeof onChange === 'function') { - onChange(e); - } - } - validateField (e) { - const { target } = e, - { validity } = target, - { valueMissing, valid } = validity; - let invalidmsg; - if (valueMissing) { - invalidmsg = 'This is a required field'; - } else if (!valid) { - invalidmsg = target.validationMessage; - } - this.setState({ invalidmsg }); - } + static defaultProps = { + value: '', + type: 'text' + } + state = { + invalidmsg: null, + value: this.props.value + } + render () { + const { + name, + id = name, + label, + onChange + } = this.props; + const { value, invalidmsg } = this.state; + const inputProps = { + ...this.props, + id, + value, + onChange: (e) => this.handleChange(e, onChange) + }; + return ( +
+ + + { + invalidmsg ? + {invalidmsg} : + null + } +
+ ); + } + handleChange (e, onChange) { + this.setState({ + value: e.target.value + }); + this.validateField(e); + if (onChange && typeof onChange === 'function') { + onChange(e); + } + } + validateField (e) { + const { target } = e, + { validity } = target, + { valueMissing, valid } = validity; + let invalidmsg; + + if (valueMissing) { + invalidmsg = 'This is a required field'; + } else if (!valid) { + invalidmsg = this.props.invalidmsg || target.validationMessage; + } + this.setState({ invalidmsg }); + } } - + class App extends Component { render() { return (
console.log('change', e)} />
console.log('change', e)} - />
+ />
) }