onChange事件处理程序仅在输入值更改时调用。在提交表单时不调用。
要在提交表单时访问输入值，可以使用Checkout组件中react-hook-form提供的handleSubmit挂钩。此挂钩将回调函数作为参数，在提交表单时将调用此函数。表单输入值将作为对象传递给此回调函数：

import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";

const CartInner = React.forwardRef(
  (
    {
      control,
      element,
      value,
      handleOnChange,
      images,
      name,
      monthlyAmount,
      price,
      projectedGrowth,
      id,
      ...inputProps
    }: any,
    ref: any
  ) => {
    return (
      <div className="grid gap-8 grid-cols-2 mb-12 py-6 px-8 border-2 border-slate-200">
        <div>
          <PureInput
            min={200}
            max={price}
            onChange={handleOnChange}
            type="number"
            step={200}
            defaultValue={element.price}
            id={id}
            ref={ref}
            {...inputProps}
          />
        </div>
      </div>
    );
  }
);

export default function Checkout() {
  const { control, handleSubmit } = useForm();

  const handleOnChange = (index: any, e: any) => {
    console.log(e, "e");
  };

  const onSubmit = async (data: any) => {
    console.log(data, "data from Form.tsx");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="grid gap-8 grid-cols-3">
      <div className="col-span-2">
        {[0, 2].map((element, index) => {
          return (
            <fieldset key={index}>
              <Controller
                render={({ field }) => (
                  <CartInner
                    element={element}
                    handleOnChange={(e) => handleOnChange(index, e)}
                    {...field}
                  />
                )}
                name={`test.${index}.lastName`}
                control={control}
              />
            </fieldset>
          );
        })}
        <button>Progess to payment</button>
      </div>
    </form>
  );
}

the documentation的这一部分让我找到了答案：

import React, { useEffect, useState } from "react";

import PureInput from "./PureInput";
import { useForm, Controller } from "react-hook-form";

const CartInner = React.forwardRef(
  ({ onChange, onBlur, name, label, ...inputProps }: any, ref: any) => {
    return (
      <input
        name={name}
        ref={ref}
        onChange={onChange}
        onBlur={onBlur}
        type="number"
      />
    );
  }
);

export default function Checkout() {
  const { control, handleSubmit } = useForm();

  const handleOnChange = (index: any, e: any) => {
    console.log(e.target.value, "e");
  };

  const onSubmit = async (data: any) => {
    console.log(data, "data from Form.tsx");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="grid gap-8 grid-cols-3">
      <div className="col-span-2">
        {[0, 2].map((element, index) => {
          return (
            <fieldset key={index}>
              <Controller
                render={({ field: { onBlur, value, name, ref } }) => (
                  <CartInner
                    key={index}
                    name={name}
                    ref={ref}
                    onChange={(e) => handleOnChange(index, e)}
                    onBlur={onBlur}
                  />
                )}
                name={`test.${index}.lastName`}
                control={control}
              />
            </fieldset>
          );
        })}
        <button>Progess to payment</button>
      </div>
    </form>
  );
}

// add delete
// total money
// add the cart documents to a history with a timestamp and show it was a BUY ORDER
// delete the documents from the cart

您可以进行以下更改以插入onChange事件

// pass an event handler name with different name       
     <PureInput
        min={200}
        max={price}
        // pass a handler with different name as inputOptions overrides that prop
        handleOnChange={handleOnChange}
        type="number"
        step={200}
        defaultValue={element.price}
        id={id}
        ref={ref}
        {...inputProps}
     />

//plug into the default onchange to call you handler also
 <input
        id={id}
        ref={ref}
        onChange={(e) => {
          console.log("on change");
          // call react-hook-form onChange
          onChange(e);
          // call your handler
          handleOnChange(e);
        }}
        type="input"
        className={`${className} block w-full bg-white text-black rounded-md border-2 font-bold border-grey-200 text-xl px-4 py-4 focus:border-orange-500 focus:ring-orange-500`}
        {...inputProps}
      />

希望它能帮助你解决你的问题，
干杯