2

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

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

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

  • 我试图在注册表单中复制我在登录表单中所做的操作，但它仍然以. 还有，应该保存在自己的单独文件中吗？arrayhooks

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

在此处输入图像描述

这是我所做的代码片段。

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>
       // ...

谢谢你。

4

1 回答 1

1

在你的Signup表格中，你有这个......

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

上面发生了什么？

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

解决方案：

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

您还可以阅读有关在 react 中处理表单的更多信息。

于 2020-09-13T02:25:45.243 回答