javascript - React 钩子表单不适用于来自 reactstrap 的输入
问题描述
我对 react-hook-form 和 reactstrap 有疑问。我有这个组件 List.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 = () => {
const [store, dispatch] = useContext(ListContext);
const { register, handleSubmit, formState: { errors }, getValues } = useForm();
const onSubmit = data => addList(data);
const addList = (data) => {
console.log(data);
//dispatch({ type: ADD_LIST, store: store, listName: data.name });
}
return (
<Container>
<Row>
<Col>
<ListGroup>
{store.lists.map((item, key) => {
return <ListGroupItem key={key} ><Link to={"/list/" + key}>{item.name}</Link></ListGroupItem>
})}
</ListGroup>
</Col>
<Col>
<Form onSubmit={handleSubmit(onSubmit)}>
<FormGroup>
<Label >Name of new list</Label>
<Input type="text" placeholder="name of list" {...register("name", { required: true })} ></Input>
</FormGroup>
<Button type="submit">Přidat list</Button>
</Form>
</Col>
</Row>
</Container>
);
}
问题是,当我提交表单时,什么也没有发生(addList 不会发生)。但是,当我用来自经典 html 的正常输入替换 Input(来自 reactstrap)时,一切似乎都正常。所以问题是来自 reactstrap 的输入。有谁知道如何解决这个问题?非常感谢!
解决方案
试试这样,看输入中的innerRef
const { register, handleSubmit, formState: { errors } } = useForm();
const { ref, ...rest } = register('name')
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Input type="text" placeholder="Name" innerRef={ref} {...rest} />
<Input type="submit" />
</form>
);
推荐阅读
- python - 无法让 pyperclip 在 python3 上使用复制和粘贴模块
- angular - (未知 url)的 Http 失败响应:0 未知错误 - 仅在 Angular 5 上
- python - 根据邀请链接设置角色
- wordpress - 如何更改 wordpress 菜单类中的图像文本?
- python - 减少 Django 查询!在一个查询而不是多个查询中获取所有结果?
- node.js - TypeError:Model.find 不是函数
- python - python脚本未编码为utf-8
- angular - 将匿名用户转换为注册用户
- shell - 在 unix 中删除 .csv 文件中的多列
- angular - Nginx 和 SPA (Angular)