Блог

У меня проблема с реакцией-формой крючка и реакцией. У меня есть этот список компонентов.jsx:

 import { useContext, useEffect } from "react"; import { ListContext, ADD_LIST } from '../providers/ShoppingListProvider'; import { Link } from "react-router-dom"; import { useForm } from 'react-hook-form'; import { ListGroup, ListGroupItem, Form, FormGroup, Button, Input, Label, Container, Row, Col } from 'reactstrap';      export const Lists = () =gt; {  const [store, dispatch] = useContext(ListContext);  const { register, handleSubmit, formState: { errors }, getValues } = useForm();  const onSubmit = data =gt; addList(data);   const addList = (data) =gt; {  console.log(data);  //dispatch({ type: ADD_LIST, store: store, listName: data.name });   }   return (  lt;Containergt;  lt;Rowgt;  lt;Colgt;   lt;ListGroupgt;  {store.lists.map((item, key) =gt; {   return lt;ListGroupItem key={key} gt;lt;Link to={"/list/"   key}gt;{item.name}lt;/Linkgt;lt;/ListGroupItemgt;  })}  lt;/ListGroupgt;  lt;/Colgt;  lt;Colgt;  lt;Form onSubmit={handleSubmit(onSubmit)}gt;  lt;FormGroupgt;  lt;Label gt;Name of new listlt;/Labelgt;  lt;Input type="text" placeholder="name of list" {...register("name", { required: true })} gt;lt;/Inputgt;  lt;/FormGroupgt;  lt;Button type="submit"gt;Přidat listlt;/Buttongt;  lt;/Formgt;  lt;/Colgt;  lt;/Rowgt;   lt;/Containergt;  );  }  

проблема в том, что, когда я отправляю форму, ничего не происходит (addList не произойдет). Но когда я заменяю ввод (из reactstrap) обычным вводом из классического html, кажется, что все работает. Таким образом, проблема заключается в вводе данных из reactstrap. Кто-нибудь знает, как решить эту проблему? Большое спасибо!

Попробуйте вот так, посмотрите на внутреннюю ссылку во входных данных

 const { register, handleSubmit, formState: { errors } } = useForm(); const { ref, ...rest } = register('name') const onSubmit = data =gt; console.log(data); return (  lt;form onSubmit={handleSubmit(onSubmit)}gt;  lt;Input type="text" placeholder="Name" innerRef={ref} {...rest} /gt;   lt;Input type="submit" /gt;  lt;/formgt; );