最近在做的一個專案使用了Antd和reac-redux,其中有一處表單提。我的需求是,當使用者輸入時進行前端驗證,這裡使用了Antd提供的getFieldDecorator
;當使用者提交表單之後,將後端傳回的錯誤訊息對應到表單中,這裡使用了Antd提供的自訂校驗,即FormItem
的help
和validateStatus
屬性。
但是我發現當使用自訂校驗時,getFieldDecorator
就不在運作了。那如果想使用getFieldDecorator
校驗,又想在後端回傳資料時使用自訂校驗,該如何處理呢?
提前謝謝各位。
附程式碼片段:
submitLogin = (e) => {
e.preventDefault();
// 前端验证
this.props.form.validateFields((err, values) => {
if (!err) {
// 前端验证无误,向后端提交
this.props.submitLoginForm(values);
}
});
};
render() {
const { getFieldDecorator } = this.props.form;
// 后端返回结果
const access = this.props.loginState.results;
const rulesGenerate = {
email: getFieldDecorator('email', {
rules: [
{ required: true, message: '请填写邮箱' },
{ type: 'email', message: '邮箱格式不对' },
]
})
};
// 服务器返回的数据是否有error
const errors = access.error?access.error:false;
return (
<Form onSubmit={this.submitLogin} className="login-form">
<FormItem
className="login-form__item"
validateStatus={errors&&errors.email?'error':''}
help={errors&&errors.email?errors.email:''}
>
{rulesGenerate.email(
<Input addonBefore={<Icon fontSize="20" type="user" />} placeholder="用户名 / ID / 手机号" />
)}
</FormItem>
</Form>
);
// 传送state到UI组件的props
const mapStateToProps = (state) => {
return {
loginState: state.loginReducer
}
}
// 派发事件
const mapDispatchToProps = (dispatch) => {
return {
submitLoginForm: (values) => {
dispatch(loginProcessing(values))
}
}
}
// 连接UI组件
const ShowForm = connect( mapStateToProps,mapDispatchToProps )(Login)
// start fetching data
export const LOGIN_STARTING = 'LOGIN_STARTING'
function loginStarting(isLogging) {
return {
type: LOGIN_STARTING,
isLogging
}
}
// fetched data successfully
export const LOGIN_SUCCEEDED = 'LOGIN_SUCCEEDED'
function loginSucceeded(isLogging,results,fields) {
return {
type: LOGIN_SUCCEEDED,
isLogging,
results,
fields
}
}
// meet some errors after fetching
export const LOGIN_FAILED = 'LOGIN_FAILED'
function loginFailed(isLogging,results) {
return {
type: LOGIN_FAILED,
isLogging,
results
}
}
export function loginProcessing(values) {
return function (dispatch, getState) {
let loginData = new FormData();
loginData.append('email', values.email);
dispatch(loginStarting(true));
return fetch(`api/login`,{
method: 'POST',
body: loginData
})
.then(response => response.json())
.then(response =>{
return dispatch(loginSucceeded(false,response,values))
}).catch(error =>
dispatch(loginFailed(false,error))
);
}
}
import
{
LOGIN_STARTING,
LOGIN_SUCCEEDED,
LOGIN_FAILED
} from '../action.js';
const initialState = {
isLogging: false,
results: {},
fields: {}
};
export default function formReducer(state = initialState, action) {
switch (action.type) {
case LOGIN_STARTING:
return Object.assign({}, state, {
isLogging: action.isLogging
})
case LOGIN_SUCCEEDED:
return Object.assign({}, state, {
isLogging: action.isLogging,
results: action.results,
fields: action.fields
})
case LOGIN_FAILED:
return Object.assign({}, state, {
isLogging: action.isLogging,
results: action.results
})
default:
return state;
}
}
使用
this.props.form
的setFields
方法,官方範例:server-validate