React点击Add User按钮后如何清空div内所有输入框内容

你的输入框是React受控组件，输入内容和name、username两个组件state双向绑定，要实现提交后清空输入框，只需要在dispatch提交用户数据的逻辑执行完成后，把这两个state重置为初始空字符串即可。
另外注意你现有代码有个边界bug：当用户列表为空时，取userList[userList.length - 1].id会抛出找不到id的报错，需要加兜底逻辑处理首次添加用户的场景。

具体修改点 #

• 在按钮点击的onClick回调中，dispatch()调用完成后新增两行state重置逻辑：

  setName("")
  setUsername("")
  

• 优化id生成逻辑，适配空列表场景：

  id: userList.length ? userList[userList.length - 1].id + 1 : 1
  

• 给两个input标签补全value属性绑定对应state，符合React受控组件标准写法，避免state和输入框内容不同步。

修改后完整代码 #

import "./App.css";
import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { addUser} from "./features/Users";
function App() {
  const dispatch = useDispatch();
  const userList = useSelector((state) => state.users.value);

  const [name, setName] = useState("");
  const [username, setUsername] = useState("");

  return (
    <div className="App">
      <div className="addUser">
        <input
          type="text"
          placeholder="Name..."
          value={name}
          onChange={(event) => {
            setName(event.target.value);
          }}
        />
        <input
          type="text"
          placeholder="Username..."
          value={username}
          onChange={(event) => {
            setUsername(event.target.value);
          }}
        />
        <button
          onClick={() => {
            dispatch(
              addUser({
                id: userList.length ? userList[userList.length - 1].id + 1 : 1,
                name,
                username,
              })
            );
            // 提交后重置输入框state，自动清空输入内容
            setName("");
            setUsername("");
          }}
        >
          Add User
        </button>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Anee go