為什么即使在添加onChange函式后我的輸入欄位也無法編輯-反應

我是 React 的新手，我嘗試了一個簡單的登錄表單，它接受用戶輸入并將其傳遞給后端。如果登錄憑據正確，此應用程式還被撰寫為創建令牌。為了接受用戶輸入，我添加了 onChange() 函式并為每個輸入欄位呼叫它，但是它仍然不可編輯。我找不到錯誤。我還添加了 onSubmit() 函式實作。我確實嘗試了各種其他方法來呼叫 onChange 函式，但是沒有成功。

 const [formData, setFormData] = useState({
        clientEmail: "",
        clientPassword: "",
        errorMsg: false,
        loadingSpinner: false,
      });
      
      // destructure form data
      const { clientEmail, clientPassword, errorMsg, loadingSpinner } = formData;
    const handleChange = (evt) => {
          setFormData({
            ...formData,
            [evt.target.name]: evt.target.value,
            errorMsg: "",
          });
        };
    
const handleSubmit = (evt) => {
      evt.preventDefault();
    
      //form validation
      if (isEmpty(clientEmail) || isEmpty(clientPassword)) {
        setFormData({
          ...formData,
          errorMsg: "All field are Required",
        });
      } else if (!isEmail(clientEmail)) {
        setFormData({
          ...formData,
          errorMsg: "Invalid Email new",
        });
      } else {
        const { clientEmail, clientPassword} = formData;
      
        const data = {
          clientEmail,
          clientPassword,
        };
        setFormData({
          ...formData,
          loadingSpinner: true,
        });
       
        ClientLoginUser(data)
          .then((response) => {
     
            console.log(response);
            setClientAuthentication(response.data.token, response.data.clients);
          
          
              if (isClientAuthenticated()) {  
            console.log("client Successful");
              history.push("./clientDashboard");
            }
          })
          .catch((err) => {
            console.log("client login api controller error: ", err);
            setFormData({
              ...formData,
              errorMsg:err.response.data.errorMessage,
              loading:false
            });

          });
      }
    };
    
    const showLoginForm = () => (
        <Fragment>
          <div className="card px-5 py-5">
           
            <div className="card-body">
              <h5 className="card-title text-center pb-3">Client Login</h5>
              <form className="login-form" 
              onSubmit={handleSubmit} 
              noValidate>
    
                {/* Email */}
                <div className="form-group">
                  <input
                    type="email"
                    className="form-control"
                    name="email"
                     value={clientEmail}
                    placeholder="Email"
                     onChange={handleChange}
                  />
                </div>
                {/* Password */}
                <div className="form-group">
                  <input
                    type="password"
                    className="form-control"
                    name="password"
                     value={clientPassword}
                    placeholder="Password"
                    onChange={handleChange}
                  />
                </div>
                {/* Submit button */}
                <div className="form-group pt-3">
                  <button
                    type="submit"
                    className="btn btn-primary btn-lg btn-block"
                  >
                    Login
                  </button>
                </div>
              </form>
            </div>
          </div>
        </Fragment>
      );
    
      /****************************
       * Render
       ****************************/
      return (
        <div className="login-container">
          <GridWrapper>
            <div className="container-fluid">
              <div className="row px-4 vh-100">
                <div className="col-12 col-md-8 my-auto pl-5">
                  <img
                    src="/images/welcomeLogo.png"
                    className="img-fluid"
                    alt="Logo"
                  />
                </div>
                <div className="col-12 col-md-3 align-self-center">
                  {errorMsg && showErrorMsg(errorMsg)}
                  {loadingSpinner && (
                    <div className="text-center pb-5">{showLoading()}</div>
                  )}
    
                  {showLoginForm()}
                </div>
              </div>
            </div>
          </GridWrapper>
        </div>
      );
    };
      // return <p>ClientLogin Component</p>;

uj5u.com熱心網友回復：

該name輸入是不完全一樣formData的狀態

你有這個狀態

const [formData, setFormData] = useState({
    clientEmail: "",
    clientPassword: "",
    errorMsg: false,
    loadingSpinner: false,
  });

其中包含資料，如 clientEmail

<input
    type="email"
    className="form-control"
    name="email"
    value={clientEmail}
    placeholder="Email"
    onChange={handleChange}
  />

其中包含 name="email"

在handleChange函式中

const handleChange = (evt) => {
      setFormData({
        ...formData,
        [evt.target.name]: evt.target.value,
        errorMsg: "",
      });
    };

你包含 [evt.target.name]: evt.target.value

這意味著您正在嘗試分配新值，formData.email而不是formData.clientEmail

有兩種解決方案

首先你可以改變

const [formData, setFormData] = useState({
    email: "",
    ...
  });

或者你可以

<input
 type="email"
  className="form-control"
  name="clientEmail"
  value={clientEmail}
  placeholder="Email"
  onChange={handleChange}
/>

標籤：反应 形式 用户输入 变化中

上一篇：我想將此代碼塊轉換為可以從html表單呼叫的keydown函式

下一篇：使用普通Javascript將變數放入表單中