Bắt đầu với Reactjs- Phần 5, Tìm hiểu về redux-form
Bài đăng này đã không được cập nhật trong 6 năm
1.Giới thiệu
- Redux form là 1 Higher-Order Components làm việc với React Redux để lưu trữ state của react form vào store của redux.
- Redux cung cấp cho chúng ta 1 chuỗi các event dựa trên các thay đổi của react form để handle các thay đổi 1 cách dễ dàng.
2. Cài đặt và sử dụng
2.1. Cài đặt i18next
- npm package
npm i redux --save
npm i react-redux --save
2.2 Sử dụng
Đầu tiên ta tạo một component, tạo một form như sau register/RegisterForm.jsx
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import validateInput from './validate';
import { buttons } from 'bootstrap-css'
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div className="form-group">
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type} />
</div>
{touched && error && <span className="text-danger">{error}</span>}
</div>
);
const SubmitValidationForm = props => {
const { error, handleSubmit, pristine, reset, submitting } = props;
return (
<form className="form-horizontal" onSubmit={handleSubmit}>
<Field
name="firstName"
type="text"
component={renderField}
label="first name"
/>
<Field
name="lastName"
type="text"
component={renderField}
label="last name"
/>
<Field
name="email"
type="text"
component={renderField}
label="email"
/>
<Field
name="password"
type="password"
component={renderField}
label="Password"
/>
{error && <strong>{error}</strong>}
<div>
<button type="submit" disabled={submitting}>register</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
};
export default reduxForm({
form: 'submitValidation', // a unique identifier for this form
validate: validateInput,
})(SubmitValidationForm);
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import validateInput from './validate';
import { buttons } from 'bootstrap-css'
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div className="form-group">
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type} />
</div>
{touched && error && <span className="text-danger">{error}</span>}
</div>
);
const SubmitValidationForm = props => {
const { error, handleSubmit, pristine, reset, submitting } = props;
return (
<form className="form-horizontal" onSubmit={handleSubmit}>
<Field
name="firstName"
type="text"
component={renderField}
label="first name"
/>
<Field
name="lastName"
type="text"
component={renderField}
label="last name"
/>
<Field
name="email"
type="text"
component={renderField}
label="email"
/>
<Field
name="password"
type="password"
component={renderField}
label="Password"
/>
{error && <strong>{error}</strong>}
<div>
<button type="submit" disabled={submitting}>register</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
};
export default reduxForm({
form: 'submitValidation', // a unique identifier for this form
validate: validateInput,
})(SubmitValidationForm);
Ở đẩy mình sử dụng thêm package "bootstrap-css"
npm install bootstrap-css@4.0.0-alpha.5 --save
Tạo thêm 1 file để handle validate theo ý của mình register/validate.js
import isEmpty from 'lodash/isEmpty';
const regexEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const validateInput = (values) => {
const errors = {};
if(isEmpty(values.firstName)) {
errors.firstName = { _error: 'Required' };
}
if(isEmpty(values.lastName)) {
errors.lastName = { _error: 'Required' };
}
if(isEmpty(values.email)) {
errors.email = { _error: 'Required' };
} else if(!regexEmail.test(values.email)){
errors.email = { _error: 'Email invalid' };
}
if(isEmpty(values.password)) {
errors.password = { _error: 'Required' };
}
return errors;
};
export default validateInput;
Trên đây là mình validate basic, các bạn có thể validation theo từng spec cụ thể. tiếp theo là mình tạo 1 container chứa form, và xử lý data khi pass validate
register/index.jsx
import React, { Component } from 'react';
import RegisterForm from './RegisterForm';
class register extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(values) {
// handle data after pass validate
}
render() {
return (
<RegisterForm
onSubmit={this.handleSubmit}
/>
);
}
}
export default register;
Chúng ta sẽ render tạm trong file App.js để thấy được kết quả
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Cart from './components/cart';
import Register from './register';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<div className="App-intro">
<h1> Form register </h1>
</div>
<Register />
</div>
);
}
}
export default App;
All rights reserved