Question

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

Answer 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。“

Answer 2

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

可以使用带有react-hook-form和react-input-mask的reactstrap吗？

2 个答案: