36日:反応フォーム確認
6280 ワード
import React from 'react';
import yup from 'yup';
const FormComponent = ({ values, errors, onChange, onBlur, onSubmit }) => (
<form onSubmit={onSubmit}>
<input onChange={onChange} value={values.email} error={errors.email} />
</form>
);
const Form = createForm({
validations: {
email: yup.string().email().required()
},
adapter: 'yup'
})(FormComponent);
class PageWithForm extends React.Component {
constructor(props) {
super(props);
this.state = { errors: {} };
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit({ values, errors, isValid }) {
this.props.createResource(values).catch((err) => this.setState({ errors: err }));
}
render() {
return <Form errors={errors} onSubmit={this.handleSubmit} />
}
}
const mapStateToProps = () => ({});
const mapDispatchToProps = (dispatch) => ({
createResource: (resourceProps) => dispatch(saveResource(resourceProps)),
});
export default connect(mapStateToProps, mapDispatchToProps)(PageWithForm);
Reference
この問題について(36日:反応フォーム確認), 我々は、より多くの情報をここで見つけました https://dev.to/mattryanmtl/day-36-react-form-validation-h3aテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol