为什么我的输入字段即使在添加 onChange 函数后也不可编辑 - React

Question

我是 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>;

Answer 1

输入的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

有两种解法

first you can change

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

or you can

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

为什么我的输入字段即使在添加 onChange 函数后也不可编辑 - React

Why is my input field not editable even after adding onChange function - react

reactjs

forms

user-input

onchange