Reactjs MaterialUI 和 React Hook 表单不记录值

发布于08月28日

我使用React-Hook-Form、Zod和Material-UI来创建Textfield. 我现在的问题是，当我提交表单时，amount文本字段没有输出任何值？我的代码中遗漏了什么吗？

CODESANDBOX-&gt；CLICK HERE

function App() {
  const schema = zod.object({
    amount: zod.string().optional()
  });

  type FormData = zod.infer<typeof schema>;

  const resolver = zodResolver(schema);

  const {
    handleSubmit,
    formState: { errors },
    register
  } = useForm<FormData>({
    mode: "onSubmit",
    resolver
  });

  const onSubmit = (data: any) => console.log(data);
  console.log(errors);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Stack spacing={2} direction="row" alignItems="center">
        <CurrencyInput
          label="Amount"
          type="text"
          {...register("amount")}
          fullWidth
        />
        <Button type="submit" variant="contained" fullWidth>
          Submit
        </Button>
      </Stack>
    </form>
  );
}

代码

CurrencyInput.tsx

import {
  InputAdornment,
  TextField as MuiTextField,
  TextFieldProps
} from "@mui/material";

export default function CurrencyInput({ onChange, ...props }: TextFieldProps) {
  const handleChange = (event: any) => {
    let value = event.target.value.replace(/[^\d.]/g, "");

    // Split the input by the decimal point to check for decimal places
    const parts = value.split(".");

    // Ensure there are at most 2 decimal places
    if (parts.length > 1) {
      value = `${parts[0]}.${parts[1].slice(0, 2)}`;
    }

    // Use a regular expression to add commas for thousands
    event.target.value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");

    if (onChange) onChange(event);
  };

  return (
    <MuiTextField
      type="text"
      placeholder="0.00"
      onChange={handleChange}
      sx={{
        "& .MuiFormHelperText-root": {
          color: "gray.gray-9"
        }
      }}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">{"USD"}</InputAdornment>
        )
      }}
      {...props}
    />
  );
}

App.tsx

function App() {
  const schema = zod.object({
    amount: zod.string().optional()
  });

  type FormData = zod.infer<typeof schema>;

  const resolver = zodResolver(schema);

  const {
    handleSubmit,
    formState: { errors },
    register
  } = useForm<FormData>({
    mode: "onSubmit",
    resolver
  });

  const onSubmit = (data: any) => console.log({ data });
  console.log({ errors });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Stack spacing={2} direction="row" alignItems="center">
        <CurrencyInput
          label="Amount"
          type="text"
          inputProps={{ ...register("amount") }}
          fullWidth
        />
        <Button type="submit" variant="contained" fullWidth>
          Submit
        </Button>
      </Stack>
    </form>
  );
}