私はしばらくの間努力してきましたが、成功しませんでした。私はreactstrap + react-hook-formとreactstrap + react-input-maskを実装することに成功しましたが、3つを一緒に実装することはできません。これが実行中のコードです: 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は、箱から出してすぐには付属していません。
「reactstrapをインストールし、Bootstrap NPMから。ReactstrapにはBootstrap CSSが含まれていないため、これもインストールする必要があります。
npm install --save bootstrap
npm install --save reactstrap react react-dom
Import Bootstrap CSS in src/index.js file:
import 'bootstrap/dist/css/bootstrap.min.css';
Src/App.jsファイルまたはカスタムコンポーネントファイル内の必要なreactstrapコンポーネントをインポートします。
import { Button } from 'reactstrap';
これで、renderメソッドで定義されたコンポーネント階層内のインポートされたreactstrapコンポーネントを使用する準備ができました。以下は、reactstrapを使用してやり直したApp.jsの例です。」
Documentation は、「コントローラー」のインポートを示し、「コントロール」は、必要なことを行うラッパーとして使用されます。彼らはそれをかなりよく説明しているので、例までスクロールダウンしてください