Possible to show error messages outside of owner "SignIn" component in this div <div className="error_msg">error msg here</div>
SignIn = React.createClass({
getInitialState() {
return {
password: null,
valid: false
}
},
checkRequired(value) {
return !!value.trim();
},
checkPasswordsMatch(value) {
var match = this.refs.password.getValue() === value;
this.setState({
valid: match,
password: value
});
return match;
},
render() {
return (
<div>
<div className="error_msg">error msg here</div>
<form autoComplete="off">
<Input
ref="password"
name="password"
placeholder="Password"
errorMessage="Password is required"
validate={this.checkRequired}
/>
<Input
name="confirmPassword"
placeholder="Confirm password"
errorMessage="Passwords do not match"
validate={this.checkPasswordsMatch}
/>
<button type="submit">Submit</button>
</form>
</div>
)
}
});
Input = React.createClass({
getInitialState() {
return {
hasChanged: false,
valid: false
}
},
handleChange(event) {
if (this.props.validate) {
this.setState({
valid: this.props.validate(event.target.value)
});
}
this.setState({
hasChanged: true
});
},
getValue() {
//return this.refs.input.value; // For React 0.14+
return this.refs.input.getDOMNode().value;
},
render() {
return (
<div>
<input
ref="input"
name={this.props.name}
placeholder={this.props.placeholder}
onChange={this.handleChange}
/>
{this.state.hasChanged && !this.state.valid && <InputError errorMessage={this.props.errorMessage} />}
</div>
)
}
});
InputError = React.createClass({
render() {
return (
<div>{this.props.errorMessage}</div>
)
}
})
React.render(<SignIn />, document.body);
