如何清除反應div中的所有輸入

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..."
          onChange={(event) => {
            setName(event.target.value);
          }}
        />
        <input
          type="text"
          placeholder="Username..."
          onChange={(event) => {
            setUsername(event.target.value);
          }}
        />
        <button
          onClick={() => {
            dispatch(
              addUser({
                id: userList[userList.length - 1].id   1,
                name,
                username,
              })
            );
          }}
        >
          {" "}
          Add User
        </button>
      </div>
);}

我是反應和減少的新手。單擊“添加用戶”按鈕后，代碼中輸入的新用戶資料將添加到后端串列中。我希望在單擊“添加用戶”按鈕后清除輸入部分中的值，但我不知道該怎么做。

uj5u.com熱心網友回復：

單擊提交按鈕后，您需要清除您的狀態。例如：設定函式，如 =>

const clearData = {
    setName("")
    setUsername("")
    }
 and pass the func to your onClick event.
onClick={clearData}

uj5u.com熱心網友回復：

以下代碼可以正常作業。

只需將和value={name}分別分配value={username}給兩種輸入型別，然后Add User單擊clear.bothstates

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={() => {
            setName("");
            setUsername("");
            dispatch(
              addUser({
                id: userList[userList.length - 1].id   1,
                name,
                username,
              })
            );
          }}
        >
          {" "}
          Add User
        </button>
      </div>
);}

uj5u.com熱心網友回復：

您可以使用表單欄位串列維護一個簡單的變數，并在需要清除表單資料時使用該變數更新表單狀態。當您還需要添加其他欄位時，以下方法會很方便。

import "./App.css";
import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { addUser} from "./features/Users";

const formFields = { name: '', username: '' };

function App() {
  const dispatch = useDispatch();
  const userList = useSelector((state) => state.users.value);
  const [params, setParams] = useState(formFields)

  const handleChange = (e) => {
    const { name, value } = e.target;
    setParams({ ...params }, ...{[name]: value});
  }

  const clearForm = () => setParams(formFields);

  return (
    <div className="App">
      <div className="addUser">
        <input
          type="text"
          placeholder="Name..."
          value={params.name}
          onChange={(e) => handleChange(e)}
        />
        <input
          type="text"
          placeholder="Username..."
          value={params.username}
          onChange={(e) => handleChange(e)}
        />
        <button
          onClick={() => {
            dispatch(
              addUser({
                id: userList[userList.length - 1].id   1,
                ...params
              })
            );
            clearForm();
          }}
        >
          {" "}
          Add User
        </button>
      </div>
    </div>
)
}

標籤：javascript 反应 还原

上一篇：物件回傳陣列的關鍵字搜索

下一篇：函式內部的變數不能被呼叫