在数组中反应输入表单值

Question

我正在尝试构建一个注册表单，我已经构建了登录表单并且它工作得很好，但是注册表单很不正常。

• 首先，我使用react-dev 工具检查正在发生的事情，我意识到来自注册 表单的每个input 值恰好位于array 中。

• 我回到 login 表单进行检查，发现input 字段的值格式正确（strings）。但是 registration 表单中每个特定 input 字段的值在 array 中。 我可能做错了什么？

• 我试图在 registration 表单中复制我在 login 表单中所做的操作，但它仍然以 array 的形式出现。另外，hooks 是否应该保存在单独的文件中？

这是我从react-dev 工具中看到的注册表单。

这是我所做的代码 sn-p。

const Signup = (props) => {
  const authContext = useContext(AuthContext);
  const { register, clearErrors, isAuthenticated, error } = authContext;
  const [loadBtn, updateLoadBtn] = useState(false);
  const [user, setUser] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    username: "",
    phoneNumber: "",
  });

  useEffect(() => {
    if (isAuthenticated) {
      successMessage();
      props.history.push("/dashboard");
    }

    if (error) {
      missingValue(error);
      updateLoadBtn(false);
      clearErrors();
    }

    //eslint-disable-next-line
  }, [isAuthenticated, error, props.history]);

  const { firstName, lastName, email, password, username, phoneNumber } = user;
  const onChange = (e) =>
    setUser({ ...user, [e.target.name]: [e.target.value] });

  const onSubmit = (e) => {
    e.preventDefault();
    updateLoadBtn(true);
    if (
      !firstName ||
      !lastName ||
      !email ||
      !password ||
      !username ||
      !phoneNumber
    ) {
      missingValue("Please enter all fields");
      updateLoadBtn(false);
      clearErrors();
    } else {
      register({
        firstName,
        lastName,
        email,
        password,
        username,
        phoneNumber,
      });
    }
  };

  return (
    <Fragment>
      <ToastContainer />
      <RegContainer className="container-fluid py-4">
        <RegInfo />
        <RegColumn
          onChange={onChange}
          onSubmit={onSubmit}
          firstName={firstName}
          lastName={lastName}
          email={email}
          password={password}
          phoneNumber={phoneNumber}
          loadBtn={loadBtn}
        />
      </RegContainer>
    </Fragment>
  );
}

这是负责处理注册的文件。

这是自定义组件

const RegColumn = ({
  firstName,
  onSubmit,
  onChange,
  lastName,
  username,
  password,
  phoneNumber,
  email,
  loadBtn,
}) => {
  const bodyStyle = document.querySelector("body").style;
  bodyStyle.backgroundImage = "linear-gradient(to bottom, #F6F6F2, #C2EDCE)";
  bodyStyle.backgroundRepeat = "no-repeat";
  bodyStyle.overflow = "hidden";
  bodyStyle.height = "100%";
  bodyStyle.fontFamily = "Rubik, sans-serif";
  return (
    <Fragment>
      <div id="reg-column">
        <h3 style={{ color: "#388087" }}>REGISTRATION</h3>
        <Form divid="form-row1-label" onSubmit={onSubmit}>
          <LabelContainer id="form-row1-label">
            <LabelContainer id="firstNameLabel">
              <LabelInfo labelfor="firstName" labeltitle="First Name" />
            </LabelContainer>
            <LabelContainer id="lastNameLabel">
              <LabelInfo labelfor="lastName" labeltitle="Last Name" />
            </LabelContainer>
          </LabelContainer>
          <InputContainer id="form-row1-input">
            <InputContainer id="firstNameInput">
              <Input
                type="text"
                name="firstName"
                value={firstName}
                id="firstName"
                onChange={onChange}
              />
            </InputContainer>
            <InputContainer id="lastNameInput">
              <Input
                type="text"
                onChange={onChange}
                name="lastName"
                value={lastName}
                id="lastName"
              />
            </InputContainer>
       // ...

谢谢。

Answer 1

在您的Signup 表单中，您有这个...

  // ...
  const onChange = (e) =>
    setUser({ ...user, [e.target.name]: [e.target.value] });

上面发生了什么？

• onChange() 负责更新要提交的值。
• 在setUser 中，您使用[e.target.value] 将值作为文字array 传递

解决方案：

• 删除文字数组[] 并在收到值时传递值，即e.target.value
• 左侧e.target.name 很好，因为您实际上使用的是computed property name。

您还可以阅读有关handling forms in react 的更多信息。