脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React特征Form数据管理

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实现响应式布局的最佳实践

    React实现响应式布局的最佳实践

    在当今的前端开发中,响应式设计已经成为必不可少的部分,随着各种设备的出现,确保我们的网页在不同屏幕尺寸上展示良好,已经成为开发者的首要任务之一,本文将介绍如何在React中实现响应式布局,提供一些最佳实践和示例代码,帮助大家更好地理解这一概念
    2025-02-02
  • React Markdown配置示例

    React Markdown配置示例

    React-Markdown 是一个基于 React 的 Markdown 渲染组件库,其核心设计理念是通过 Unified 生态系统实现安全、可扩展的 Markdown 解析
    2025-04-04
  • React实现双滑块交叉滑动

    React实现双滑块交叉滑动

    这篇文章主要为大家详细介绍了React实现双滑块交叉滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 使用React组件编写温度显示器

    使用React组件编写温度显示器

    这篇文章主要为大家详细介绍了使用React组件编写温度显示器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • React Zustand状态管理库的使用详解

    React Zustand状态管理库的使用详解

    Zustand是一个为React和浏览器环境设计的轻量级状态管理库,由Vercel开发,它特点包括轻量级、易用性、灵活性、可组合性和性能优化,支持多种状态管理模式和中间件,适合中小型项目,Zustand还支持TypeScript,提供类型安全的支持
    2024-09-09
  • react使用CSS实现react动画功能示例

    react使用CSS实现react动画功能示例

    这篇文章主要介绍了react使用CSS实现react动画功能,结合实例形式分析了react使用CSS实现react动画功能具体步骤与实现方法,需要的朋友可以参考下
    2020-05-05
  • 阿里低代码框架lowcode-engine设置默认容器详解

    阿里低代码框架lowcode-engine设置默认容器详解

    这篇文章主要为大家介绍了阿里低代码框架lowcode-engine设置默认容器详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • 解决配置setupProxy.js代理,页面报错404问题

    解决配置setupProxy.js代理,页面报错404问题

    这篇文章主要介绍了解决配置setupProxy.js代理,页面报错404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • react中实现将一个视频流为m3u8格式的转换

    react中实现将一个视频流为m3u8格式的转换

    这篇文章主要介绍了react中实现将一个视频流为m3u8格式的转换方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • react-router v6实现权限管理+自动替换页面标题的案例

    react-router v6实现权限管理+自动替换页面标题的案例

    这篇文章主要介绍了react-router v6实现权限管理+自动替换页面标题,这次项目是有三种权限，分别是用户，商家以及管理员，这次写的权限管理是高级权限能访问低级权限的所有页面，但是低级权限不能访问高级权限的页面，需要的朋友可以参考下
    2023-05-05

最新评论