您现在的位置是：网站首页> 编程资料编程资料

React特征学习Form数据管理示例详解_React_

2023-05-24 355人已围观

简介 React特征学习Form数据管理示例详解_React_

Form数据管理

有时会遇到多个位置需要用户输入的情况，若每个状态都配置state或handler会很繁琐，可以尝试下面的方法

import * as React from 'react'; const LoginForm = () => { // 将多个状态合并为对象 const [state, setState] = React.useState({ email: '', password: '', }); // 通过单个handler统一管理 const handleChange = (e) => { setState({ ...state, [e.target.id]: e.target.value, }); }; const handleSubmit = (e) => { e.preventDefault(); alert(state.email + ' ' + state.password); }; return ( Email
Password
 ); }; export { LoginForm };

重置Form状态

由于每次用户输入后都需要数据重置回初始状态，可以使用以下方法来预设初始值，并重置Form内容，方便新用户的再次输入

import * as React from 'react'; const LoginForm = () => { // 初始 const [state, setState] = React.useState({ // 设置初始值 email: '123@456.com', password: '12345', }); const handleChange = (e) => { setState({ ...state, [e.target.id]: e.target.value, }); }; const handleSubmit = (e) => { e.preventDefault(); // 在这里重置状态 setState({ email: '', password: '', }); alert(state.email + ' ' + state.password); }; return ( Email
Password
 ); }; export { LoginForm };

屏幕显示如下，submit后 Form内容会被重置

也可以考虑设置一个变量来统一管理初始值，方便对状态的查找和维护

import * as React from 'react'; const LoginForm = () => { // 定义初始值 const INITIAL_STATE = { email: '', password: '', }; const [state, setState] = React.useState(INITIAL_STATE); const handleChange = (e) => { setState({ ...state, [e.target.id]: e.target.value, }); }; const handleSubmit = (e) => { e.preventDefault(); // 重置初始值 setState(INITIAL_STATE); }; return ( Email
Password
 ); }; export { LoginForm };

form验证

验证Form的输入是不可或缺的流程，可参考以下方案

import * as React from 'react'; const LoginForm = () => { const INITIAL_STATE = { email: '', password: '', }; // 设置Validation要求 const VALIDATION = { email: [ { isValid: (value) => !!value, message: 'Is required.', }, { isValid: (value) => /\S+@\S+\.\S+/.test(value), message: 'Needs to be an email.', }, ], password: [ { isValid: (value) => !!value, message: 'Is required.', }, ], }; // 获取ErrorsFields const getErrorState = (state) => Object.keys(state).reduce((acc, key) => { if (!VALIDATION[key]) return acc; const errorsPerField = VALIDATION[key].map((validation) => ({ isValid: validation.isValid(state[key]), message: validation.message, })).filter((errorPerField) => !errorPerField.isValid); return { ...acc, [key]: errorsPerField }; }, {}); const [state, setState] = React.useState(INITIAL_STATE); // 设置错误信息变量 const errorState = getErrorState(state); console.log(errorState); const handleChange = (e) => { setState({ ...state, [e.target.id]: e.target.value, }); }; const handleSubmit = (e) => { e.preventDefault(); // 获取错误反馈 const hasErrors = Object.values(errorFields).flat().length > 0; if (hasErrors) return; setState(INITIAL_STATE); }; return ( Email {/* 显示email错误 */} {errorState.email?.length ? (  {errorState.email[0].message}  ) : null} 
Password {/* 显示password错误 */} {errorState.password?.length ? (  {errorState.password[0].message}  ) : null} 
 ); }; export { LoginForm };

效果显示如下