可以将 reactstrap 与 react-hook-form 和 react-input-mask 一起使用吗？

Posted 2023-03-23

【中文标题】可以将 reactstrap 与 react-hook-form 和 react-input-mask 一起使用吗？

【英文标题】：It is possible to use reactstrap with react-hook-form and react-input-mask?

【发布时间】：2020-04-04 07:15:28

【问题描述】：

我已经尝试了一段时间，但没有任何成功。我已经设法实现了 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;

【参考方案1】：

您是否将 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。”

【参考方案2】：

Documentation 显示导入“控制器”和“控制”用作包装器来执行您想要的操作。他们解释得很好，所以只需向下滚动到示例