Блог

Привет 🙂 Я хочу создать форму оформления заказа с данными адреса клиента, но при отправке я хотел бы прикрепить данные заказа, хранящиеся в useState (cartItems). На данный момент я закончил форму крючка реакции с кнопкой onSubmit на этой консоли.регистрируйте только входные данные формы. Каков наилучший способ сделать это?

 const Checkout = ({ emoneyPayment, setEmoneyPayment, cartItems }: CheckoutProps) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Order>();
 

Я не знаком с формой крючков React и машинописным текстом, но в JS / React вы можете обернуть его в другой крючок:

 const Checkout = ({ emoneyPayment, setEmoneyPayment, cartItems }: CheckoutProps) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Order>();

  const [cartItems, setCartItems] = useState([])

  // this function will be redefined every time cartItems or handleSubmit updates 
  const submitForm = useCallback(() => {
    handleSubmit(cartItems)
  }, [cartItems, handleSubmit])

  return <div onClick={submitForm}>Submit</div>
}
 

ОБНОВЛЕНИЕ:
Вам также нужно будет передать элементы карт в handleSubmit. Похоже, что это правильный способ сделать это:

 const Checkout = ({ emoneyPayment, setEmoneyPayment, cartItems }: CheckoutProps) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Order>();

  const [cartItems, setCartItems] = useState([])

  const onSubmit = (data) => {
    const finalData = {...data, cartItems}
    alert(JSON.stringify(finalData));
    // do your actual submit stuff here
  };

  return <form onSubmit={handleSubmit(onSubmit)}>...formcomponents...</form>
}