Question

我有一个使用向导方法在子组件之间移动并最终提交数据的表单。我在一个子组件中嵌套了一个第三方组件，该子组件用于使用国际格式收集用户电话号码。

我无法使用第三方组件提供的电话号码设置formState。我收到错误 TypeError：event.persist不是函数 请检查我的源代码，并使用电话号码组件的输入帮助我设置formState。

const schema = {
     phone: {
     presence: { allowEmpty: false, message: "is required" },
     length: {
       maximum: 20,
},
}

const AboutYou = ({ formState, setFormState, navigation }) => {
  const classes = useStyles();

  const { next } = navigation;

  useEffect(() => {
  const errors = validate(formState.values, schema);

  setFormState((formState) => ({
    ...formState,
    isValid: errors ? false : true,
    errors: errors || {},
  }));
}, [formState.values, setFormState]);

const handleChange = (event) => {
  event.persist();

  setFormState((formState) => ({
    ...formState,
    values: {
    ...formState.values,
    [event.target.name]:
      event.target.type === "checkbox"
        ? event.target.checked
        : event.target.value,
  },
  touched: {
    ...formState.touched,
    [event.target.name]: true,
  },
}));
};

}

我使用onChange方法调用handleChange方法，在此尝试将电话输入设置为formState。请在下面查看我的代码：

return (
  <form className={classes.form}>
     <PhoneInput
      country={"us"}
      value={formState.values.phone || ""}
      onChange={handleChange}
    />
  </form>
  );

React将组件的状态设置为表单状态的一部分

0 个答案: