反应数组中的输入表单值

Question

我正在尝试构建一个 registration 表单，我已经构建了 login 表单并且它运行良好，但是注册表是相当不错。

首先，我使用 react-dev 工具检查发生了什么，我意识到每个 input 值都来自 registration 形式恰好是 array.
我返回 login 表单进行检查，发现 input 字段的值格式正确（strings).但是 registration 表单中每个特定 input 字段的值都在 array 中。我可能做错了什么？
我试图在 registration 表单中复制我在 login 表单中所做的，但它仍然是进入 array。另外，hooks 应该保存在它自己的单独文件中吗？

这是我从 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>
       // ...

谢谢。

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 的更多信息。

反应数组中的输入表单值

React Input Form Value In An Array

javascript

frontend

node.js

reactjs

react-forms