Question

我不确定要添加什么作为标题，如果还有更相关的标题，请随时进行更新。

我有一个CodeSandbox，因此您可以深入研究所有组件。

我会尽量保持简短。我是React的新手，所以希望有人能提供帮助。

我有一个表单，只有一个输入组件，错误消息组件和按钮组件。

const form = (
  <>
    <FormControl
      key={"profileForm"}
      submit={profileFormSubmit}
      form={profileFormData}
      validation={profileFormValidation}
    >
      <InputControl
        refProp={firstNameRef}
        autoComplete="off"
        type="text"
        name="firstName"
        placeholder={firstName.value}
        value={firstName.value}
        onInput={e => {
          setFirstName(e.target.value);
        }}
        label="First Name*"
      >
        <ErrorMsg map="required" msg="First Name is required" />
      </InputControl>
      <InputButton
        disabled={!profileFormValidation.valid}
        buttonText="Update Profile"
        type="submit"
      />
    </FormControl>
  </>
);

我将此表单作为道具传递给Component，该Component返回一个骨架元素，该元素在呈现时会被表单替换。

return (
  <div className="ProfileForm">
    <ProfileFormLoader content={content} form={{ form }} loading={loading} />
  </div>
);

我正在发出一个http请求，该请求将更新状态值，然后再更新输入值

useEffect(() => {
    // Simulate http request
    const ttl = 500;
    const timeout = setTimeout(() => {
      setFirstName({ value: "test first name" });
      setContent({ title: "My Personal Details" });
      setLoading({ status: false });
    }, ttl);
    return () => {
      clearTimeout(timeout);
    };
  }, []);

我正在使用valida-js来验证表单，并使用自定义钩子useValidatedForm来进行验证。这是由我们团队的另一名成员实施的，因此我不确定100％的工作原理。

let profileFormInitialState = {
    firstName: ""
  };

  const profileFormValidationDefinitions = [
    {
      name: "firstName",
      type: "required",
      stateMap: "firstName"
    }
  ];

  const [
    profileFormData,
    profileFormValidation,
    validateProfileForm,
    getProfileFormData
  ] = useValidatedForm(
    profileFormInitialState,
    profileFormValidationDefinitions
  );

在通过按钮控件单击提交的表单上，将调用以下函数并验证表单。本质上是通过profileFormInitialState检查表单的值，并运行一个函数来检查profileFormValidationDefinitions中的任何验证器，以便检查输入内容。

const profileFormSubmit = event => {
    event.preventDefault();
    const ProfileFormValid = validateProfileForm();
    if (ProfileFormValid) {
      const formData = getProfileFormData();
      console.log(formData);
    }
  };

现在，渲染时发生的情况是，表单值正确填充了test first name。

第一个问题是，当我提交表单并运行profileFormSubmit()函数时，validateProfileForm()返回false，因为输入值似乎仍然是""而不是{{1 }}。我认为CodeSandbox在查看test first name挂钩中的定义时会很有用。

任何帮助将不胜感激。

受控组件和验证对象未返回输入值

0 个答案: