如何使用React 'useForm‘钩子注册“React”组件？

Question

我正在使用"react-hook-form“库构建一个简单的html表单：https://react-hook-form.com/

我已经将"react-bootstrap-typeahead“合并到html表单中，但是还不能用'useForm‘钩子注册这个组件。因此，在onSubmit中，忽略了“react-bootstrap”输入数据。

“”没有提供一个“名称”支柱，这使得注册组件变得很困难。

我已经阅读了关于注册这类组件的不同选项的“useForm”文档，但仍然不明白如何实现这一点：https://react-hook-form.com/get-started#Registerfields

有人曾面对过这样的挑战吗？

很高兴看到一个有用的例子，以便更好地了解如何在我的应用程序中实现“”+“react form”。谢谢!

下面是我的示例代码：

import useForm from 'react-hook-form';
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';

const myForm = (props) => {

    const { register, handleSubmit, errors } = useForm();

    const onSubmit = data => {
          // api post request with form data
        })
    };

    const mydata = [ "one", "two", "three" ];

   return (
   <>
   <form onSubmit={handleSubmit(onSubmit)} >
   <div className="form-group">

   {/* Here I'm registering text input using ref: */}

   <input type="text" className="form-control" name="name" ref={register({ required: true })} />
                                        
   </div>
                                                             
   <div className="form-group mb-0">

   {/* How can I register the below component with useForm? */}
   <Typeahead
      id="multiple-typeahead"
      clearButton
      multiple
      options={mydata}
   />
   </div>
   <button type="submit">Save</button>
   </form>
   </>
  );
}

Answer 1

我就是这样注册组件的：

import useForm from 'react-hook-form';
import { useForm, Controller } from "react-hook-form";
import 'react-bootstrap-typeahead/css/Typeahead.css';

const myForm = (props) => {

    const { register, handleSubmit, errors, control } = useForm();

    const onSubmit = data => {
          // api post request with form data
        })
    };

    const mydata = [ "one", "two", "three" ];

   return (
   <>
   <form onSubmit={handleSubmit(onSubmit)} >
   <div className="form-group">
   <input type="text" className="form-control" name="name" ref={register({ required: true })} />
   </div>
                                                             
   <div className="form-group mb-0">
<Controller
   as={Typeahead}
             control={control}
             name="typeahead_component"
             rules={{ required: true }}
             id="multiple-typeahead"
             clearButton
             multiple
             options={mydata}
             defaultValue=""
/>
   </div>
   <button type="submit">Save</button>
   </form>
   </>
  );
}