reactjs - 可以将 reactstrap 与 react-hook-form 和 react-input-mask 一起使用吗?
问题描述
我已经尝试了一段时间,但没有任何成功。我已经设法实现了 reactstrap + react-hook-form 和 reactstrap + react-input-mask 但没有同时实现这三个。这是运行的代码:https ://stackblitz.com/edit/reactstrap-v5beta-input-mask-yu6zii?file=Example.js
import React from 'react';
import { Input } from 'reactstrap';
import useForm from 'react-hook-form'
import InputMask from 'react-input-mask';
const Example = () => {
const { register, handleSubmit, errors } = useForm()
const onSubmit = data => console.log(data)
console.log(errors)
return (
<div>
<form onSubmit={handleSubmit(onSubmit)}>
<label>react-hook-form</label>
<Input
type='text'
name='input-1'
invalid={errors['input-1']}
innerRef={register({ required: true })}
/>
<br />
<label>react-input-mask</label>
<Input
type="tel"
mask="+4\9 99 999 99"
maskChar=" "
tag={InputMask}
/>
<br />
<input type="submit" />
</form>
</div>
)
}
export default Example;
解决方案
您是否将 Bootstrap 添加到您的项目中?Reactstrap 并不是开箱即用的。
“从 NPM 安装 reactstrap 和 Bootstrap。Reactstrap 不包含 Bootstrap CSS,因此也需要安装它:
npm install --save bootstrap
npm install --save reactstrap react react-dom
在 src/index.js 文件中导入 Bootstrap CSS:
import 'bootstrap/dist/css/bootstrap.min.css';
在 src/App.js 文件或您的自定义组件文件中导入所需的 reactstrap 组件:
import { Button } from 'reactstrap';
现在您已准备好在 render 方法中定义的组件层次结构中使用导入的 reactstrap 组件。这是一个使用 reactstrap 重做的示例 App.js。”
推荐阅读
- java - 如何为 TriangleMesh 中的一些三角形着色?
- python - 使用 pytest 进行模拟时出现 ModuleNotFoundError
- salesforce - 如何在出站更改集中将表数据从 SandBox 传输到生产环境?
- python - Apache Beam(2.32.0) 安装失败
- c - 试图制作一个反向循环单链表,其中每个节点都添加到列表的前面,但所有后续节点都丢失了
- mariadb - MariaDB 安装后无法启动
- awk - 从另一个文件中 awk 一个文件的列
- php - 致命错误:未捕获的错误:调用未定义的函数 cal_info()
- java - PostDiscoveryFilter 可以过滤 JUnit5 的参数化测试用例吗?
- vim - 在vim中向上/向下翻页时如何保持光标的垂直位置?