logo

关于 react-use-form，你不知道的一些事情

作者
Modified on
Reading time
5 分钟阅读:..评论:..

1. HTML表单的深层解析

1.1 表单的默认行为与阻止

HTML表单默认会在提交时刷新页面，这是因为表单提交会发送一个HTTP请求。这个行为可能会中断用户体验，特别是在单页应用（SPA）中。

阻止默认行为的标准方法是：

form.addEventListener('submit', (event) => {
  event.preventDefault();
  // 处理表单数据
});

但是，你知道吗？你也可以通过返回 false 来阻止表单提交：

form.onsubmit = function() {
  // 处理表单数据
  return false;
};

1.2 鲜为人知的表单元素

除了常见的 input、select 和 textarea，HTML5还引入了一些不太为人所知的表单元素：

  • <datalist>: 为 input 元素提供预定义选项列表。
  • <output>: 表示计算或用户操作的结果。
  • <progress>: 表示任务的完成进度。
  • <meter>: 表示已知范围内的标量测量或分数值。

例如：

<label for="browser">Choose your browser from the list:</label>

<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

1.3 表单验证的高级技巧

HTML5提供了多种内置的验证属性，但你可以通过 JavaScript 进行更复杂的验证：

const form = document.querySelector('form');
const email = document.getElementById('email');

form.addEventListener('submit', (event) => {
  if (!email.value.includes('@')) {
    email.setCustomValidity('Please enter a valid email address');
    event.preventDefault();
  } else {
    email.setCustomValidity('');
  }
});

setCustomValidity() 方法允许你设置自定义的验证消息，这会阻止表单提交并显示你的消息。

2. React中的表单处理进阶

2.1 受控组件vs非受控组件的深入对比

受控组件将表单数据存储在组件的 state 中，而非受控组件将数据存储在 DOM 中。

受控组件的优势：

  • 即时字段验证
  • 有条件地禁用提交按钮
  • 强制输入格式

非受控组件的优势：

  • 与非 React 代码集成更容易
  • 性能可能更好（因为 React 不需要控制输入值）

2.2 React Hook Form 深度解析

React Hook Form 是一个高效的表单处理库，它通过采用非受控组件和订阅模式来优化性能。

基本用法：

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      {errors.firstName && <span>This field is required</span>}
      <input {...register("lastName", { required: true })} />
      {errors.lastName && <span>This field is required</span>}
      <input type="submit" />
    </form>

  );
}

React Hook Form 的高级特性：

  1. 复杂验证规则：
const { register } = useForm();

<input {...register("username", {
  required: "Username is required",
  minLength: {
    value: 3,
    message: "Username must be at least 3 characters long"
  },
  pattern: {
    value: /^[A-Za-z]+$/i,
    message: "Username must contain only letters"
  }
})} />
  1. 自定义验证：
const { register } = useForm();

<input {...register("customField", {
  validate: value => value === "correct" || "Field must be 'correct'"
})} />
  1. 异步验证：
const { register } = useForm();

<input {...register("asyncField", {
  validate: async value => {
    const response = await fetch(`/check/${value}`);
    return response.ok || "Username is already taken";
  }
})} />
  1. 表单级别验证：
const { handleSubmit } = useForm();

const onSubmit = (data) => {
  if (data.password !== data.confirmPassword) {
    return { confirmPassword: "Passwords do not match" };
  }
  // 提交表单
};

<form onSubmit={handleSubmit(onSubmit)}>
  {/* 表单字段 */}
</form>
  1. 动态表单字段：
const { register, fields, append, remove } = useFieldArray({
  control,
  name: "items"
});

return (
  <form>
    {fields.map((field, index) => (
      <input key={field.id} {...register(`items.${index}.name`)} />
    ))}
    <button type="button" onClick={() => append({ name: "" })}>
      Add Item
    </button>

  </form>

);
  1. 表单状态管理：
const { formState: { isDirty, isSubmitting, isSubmitSuccessful } } = useForm();

return (
  <form>
    {/* 表单字段 */}
    <button type="submit" disabled={!isDirty || isSubmitting}>
      {isSubmitting ? "Submitting..." : "Submit"}
    </button>

    {isSubmitSuccessful && <p>Form submitted successfully!</p>}
  </form>

);
  1. 表单重置：
const { reset } = useForm();

const onSubmit = async (data) => {
  await submitToAPI(data);
  reset();  // 重置表单到初始状态
};

2.3 React中的表单性能优化

  1. 使用 memo 来避免不必要的重渲染：
const ExpensiveInput = React.memo(({ value, onChange }) => (
  <input value={value} onChange={onChange} />
));
  1. 使用 useCallback 来记忆事件处理函数：
const handleChange = useCallback((e) => {
  setValue(e.target.value);
}, []);
  1. 使用 useMemo 来记忆复杂的计算结果：
const isValid = useMemo(() => {
  return complexValidation(value);
}, [value]);

3. 表单可访问性的深入探讨

3.1 ARIA属性的使用

ARIA（Accessible Rich Internet Applications）属性可以极大地提高表单的可访问性：

<label for="email">Email:</label>

<input 
  type="email" 
  id="email" 
  name="email" 
  aria-required="true"
  aria-invalid="false"
  aria-describedby="email-hint"
/>
<div id="email-hint">Please enter a valid email address</div>

3.2 键盘导航

确保所有表单控件都可以通过键盘访问和操作。使用 tabindex 属性可以控制焦点顺序：

<form>
  <input type="text" tabindex="1">
  <input type="text" tabindex="3">
  <input type="text" tabindex="2">
</form>

4. 表单安全性的深层考虑

4.1 内容安全策略 (CSP)

使用内容安全策略可以防止XSS攻击：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

4.2 双重提交cookie模式

这是一种防止CSRF攻击的方法：

  1. 在表单渲染时生成一个随机token
  2. 将token设置为cookie，并在表单中包含一个隐藏字段
  3. 在服务器端验证cookie和表单字段是否匹配
<form>
  <input type="hidden" name="csrf_token" value="randomToken">
  <!-- 其他表单字段 -->
</form>

结论

表单是Web应用程序的核心组件，深入理解它们的工作原理可以帮助我们创建更好的用户体验。从HTML的内置特性到React的高级表单处理技术，再到安全性和可访问性考虑，每个方面都值得我们深入探索。

特别是React Hook Form这样的库，通过提供强大而灵活的API，大大简化了复杂表单的处理过程。它不仅提高了开发效率，还能帮助我们构建性能更好、用户体验更佳的表单。

记住，优秀的表单设计不仅仅是about功能，还关乎用户体验、可访问性和安全性。通过不断学习和实践，我们可以掌握创建卓越表单的艺术，从而打造出更加出色的Web应用程序。

< react-use-form的onSubmit没有被触发
使用react-markdown 自定义组件在 Next.js 中进行渲染 >