React技术问题咨询：表单重置、用户ID重排及用户数量限制

嘿，我来帮你搞定这三个React相关的技术问题，每个问题都给你具体的实现思路和代码示例，直接就能用到你的项目里：

1. 通过按钮实现表单字段重置 #

React里实现表单重置有两种常用方式，看你的表单是受控组件还是非受控组件来选：

受控组件方案（推荐） #

如果你的表单字段是用state管理的，直接把状态重置为初始值就行：

import { useState } from 'react';

function UserForm() {
  // 定义初始表单状态
  const initialFormState = { name: '', email: '' };
  const [formData, setFormData] = useState(initialFormState);

  // 重置函数
  const handleReset = () => {
    setFormData(initialFormState);
  };

  return (
    <div>
      <input
        type="text"
        value={formData.name}
        onChange={(e) => setFormData({...formData, name: e.target.value})}
        placeholder="用户名"
      />
      <input
        type="email"
        value={formData.email}
        onChange={(e) => setFormData({...formData, email: e.target.value})}
        placeholder="邮箱"
      />
      <button onClick={handleReset}>重置表单</button>
    </div>
  );
}

非受控组件方案 #

如果表单是用原生DOM方式管理的，可以用useRef获取表单元素，调用原生的reset()方法：

import { useRef } from 'react';

function UserForm() {
  const formRef = useRef(null);

  const handleReset = () => {
    formRef.current.reset();
  };

  return (
    <form ref={formRef}>
      <input type="text" name="name" placeholder="用户名" />
      <input type="email" name="email" placeholder="邮箱" />
      <button type="button" onClick={handleReset}>重置表单</button>
    </form>
  );
}

2. 删除用户后重新排序ID为1至10 #

删除用户后，只需要对剩下的用户数组做一次映射，重新分配ID就行，让ID从1开始递增：

import { useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    // 其他用户...
  ]);

  const handleDelete = (userId) => {
    // 过滤掉要删除的用户
    const filteredUsers = users.filter(user => user.id !== userId);
    // 重新分配ID，index从0开始，所以加1变成1开头
    const reorderedUsers = filteredUsers.map((user, index) => ({
      ...user,
      id: index + 1
    }));
    setUsers(reorderedUsers);
  };

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
          <button onClick={() => handleDelete(user.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
}

这样不管删哪个用户，剩下的用户ID都会自动从1开始连续排列。

3. 实现最多10个用户的数量限制 #

在添加用户的逻辑里加一个判断，先检查当前用户数组的长度，如果已经到10了就阻止添加，还可以给用户一个提示：

import { useState } from 'react';

function UserManager() {
  const [users, setUsers] = useState([]);
  const MAX_USERS = 10;

  const handleAddUser = () => {
    // 先判断数量是否达到上限
    if (users.length >= MAX_USERS) {
      alert('最多只能添加10个用户哦');
      return;
    }
    // 生成新用户，ID直接用当前长度+1（因为最多10个，不会超过）
    const newUser = {
      id: users.length + 1,
      name: `用户${users.length + 1}`
    };
    setUsers([...users, newUser]);
  };

  return (
    <div>
      <button onClick={handleAddUser}>添加用户</button>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

你也可以把alert换成更友好的UI提示，比如用一个状态来显示提示文本，比原生alert体验更好。

内容的提问来源于stack exchange，提问作者John Bra