Question

我的想法如下:在我的网站上,用户将能够登记产品或客户。然而,这两个表格中一个部分的登记形式显然不同。我想让用户选择他们想要做哪些登记、客户或产品,而根据他们的选择,所介绍的领域是不同的。如何利用反应ook形来做到这一点? 感谢!

Answer 1

你们应当努力这样做:

import React from  react ;
import { useForm, Controller } from  react-hook-form ;

function RegistrationForm() {
  const { control, handleSubmit, watch } = useForm();
  const selectedOption = watch( registrationType ); // Watch the dropdown value

  const onSubmit = (data) => {
    console.log(data);
    // Handle form submission based on the selected option (customer or product)
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Choose Registration Type:</label>
        <Controller
          name="registrationType"
          control={control}
          defaultValue="" // Set a default value
          render={({ field }) => (
            <select {...field}>
              <option value="">Select...</option>
              <option value="customer">Customer</option>
              <option value="product">Product</option>
            </select>
          )}
        />
      </div>

      {selectedOption ===  customer  && (
        <div>
          {/* Customer-specific fields */}
          <label>Customer Name:</label>
          <input {...register( customerName )} />
          {/* Add more customer-specific fields here */}
        </div>
      )}

      {selectedOption ===  product  && (
        <div>
          {/* Product-specific fields */}
          <label>Product Name:</label>
          <input {...register( productName )} />
          {/* Add more product-specific fields here */}
        </div>
      )}

      <button type="submit">Submit</button>
    </form>
  );
}

export default RegistrationForm;

友情链接