Как зарегистрировать компонент 'react-bootstrap-typeahead' с помощью хука React 'useForm'?

Я создаю простую html-форму, используя библиотеку response-hook-form: https://react-hook-form.com/

Я включил response-bootstrap-typeahead в html-форму, но не смог зарегистрировать этот компонент с помощью ловушки useForm. Следовательно, входные данные response-bootstrap-typeahead игнорируются во время onSubmit.

response-bootstrap-typeahead не предоставляет свойство имени, которое затрудняет регистрацию компонента.

Я прочитал документацию useForm о различных вариантах регистрации компонентов этого типа, но до сих пор не понимаю, как этого добиться: https://react-hook-form.com/get-started#Registerfields

Кто-нибудь раньше сталкивался с подобным вызовом?

Было бы здорово увидеть рабочий пример, чтобы лучше понять, как реализовать response-bootstrap-typeahead + response-hook-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>
   </>
  );
}

react-hook-form react-bootstrap-typeahead
person haizendaizen    schedule 17.08.2020    source источник
comment
Вы смотрели на компонент Controller из формы реакции-крючка? В частности, используя подход рендеринга реквизита и вручную применяя реквизиты к компоненту Typeahead: react-hook- form.com/get-started#IntegratingControlledInputs   -  person ericgio    schedule 17.08.2020
comment
@ericgio Спасибо! Это определенно указывало на правильное направление. Компонент действительно классный, и я нахожу его очень полезным. Немного изменил тему, но все еще связан с Typeahead ... Что бы вы посоветовали использовать выбранную опору, если я планирую заполнить параметры с помощью ответа REST api? Я пробовал как обычный, так и асинхронный компонент, но использование свойства selected не обновляет состояние должным образом. т.е. выбранные данные отображаются в Typeahead, но как только я выбираю другие данные, они не отображаются во входных данных. Это отлично работает со статическим файлом данных, но не с ответом api. Ваше здоровье!   -  person haizendaizen    schedule 18.08.2020
comment
Я не совсем понимаю, что вы имеете в виду. Было бы лучше задать новый вопрос со всеми соответствующими деталями.   -  person ericgio    schedule 18.08.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вот как мне удалось зарегистрировать компонент:

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>
   </>
  );
}
person haizendaizen    schedule 18.08.2020