3

私はしばらくの間試みてきましたが、成功しませんでした。私は 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;
4

2 に答える 2

1

ドキュメンテーションは、「コントローラー」をインポートすることを示しており、「コントロール」は、必要なことを行うためのラッパーとして使用されます。彼らはそれをかなりよく説明しているので、例までスクロールしてください

于 2020-01-18T06:09:51.830 に答える