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

更新时间：2022年09月17日 15:39:54 作者：Flag还是要立的

这篇文章主要为大家介绍了React特征学习Form数据管理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

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 (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="text"
          value={state.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={state.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
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 (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="text"
          value={state.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={state.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
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 (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="text"
          value={state.email}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={state.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
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 (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="text"
          value={state.email}
          onChange={handleChange}
        />
         {/* 显示email错误 */}
        {errorState.email?.length ? (
          <span style={{ color: 'red' }}>
            {errorState.email[0].message}
          </span>
        ) : null}
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={state.password}
          onChange={handleChange}
        />
        {/* 显示password错误 */}
        {errorState.password?.length ? (
          <span style={{ color: 'red' }}>
            {errorState.password[0].message}
          </span>
        ) : null}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};
export { LoginForm };

效果显示如下

小结

到这里完成一个简易的React Login Form，然而现实中React Form的问题还有很多，随着学习的深入，会继续探索Form实用的复杂性，更多关于React特征Form数据管理的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

解决React报错Property 'X' does not
这篇文章主要为大家介绍了解决React报错Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React受控组件与非受控组件详细介绍
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧
2022-09-09
Remix集成antd和pro-components的过程示例
这篇文章主要为大家介绍了Remix集成antd和pro-components的过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
详解关于react-redux中的connect用法介绍及原理解析
本篇文章主要介绍了详解关于react-redux中的connect用法介绍及原理解析，非常具有实用价值，需要的朋友可以参考下
2017-09-09
一文详解React类组件中的refs属性
react中的ref类似于vue中的ref,都是可以操作dom的,这篇文章我们通过一个demo来学习这个属性,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
2023-08-08
使用hooks写React组件需要注意的5个地方
这篇文章主要介绍了使用hooks写React组件需要注意的5个地方，帮助大家更好的理解和学习使用React组件，感兴趣的朋友可以了解下
2021-04-04
React中setState的使用与同步异步的使用
这篇文章主要介绍了React中setState的使用与同步异步的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
react hooks实现原理解析
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch 函数如何与其使用的 Function Component 进行绑定，节后实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
一文搞懂redux在react中的初步用法
Redux是JavaScript状态容器，提供可预测化的状态管理，今天通过本文给大家分享redux在react中使用及配置redux到react项目中的方法，感兴趣的朋友跟随小编一起看看吧
2021-06-06
React Redux使用配置详解
react-redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，这篇文章主要介绍了react-redux的设置,需要的朋友可以参考下
2022-08-08