Попытка использовать форму реакции-крючка в сочетании с маской ввода-реакции

У меня следующая установка. Моя маска появится, но когда я наберу ее, она просто перейдет к концу строки, я не совсем уверен, что я здесь делаю не так. Я попытался поместить все реквизиты в родительский компонент и передать их все с распространением, это не сработало. Я могу предоставить дополнительную отладку, если кто-нибудь подскажет мне, где сначала отладить, и я это сделаю.

Заранее спасибо

import React from "react"
import { useForm } from "react-hook-form"
import MaskedInput from "react-input-mask"

const Quote = () => {
  const { register, handleSubmit, watch, errors } = useForm();
  const [tel, setTel] = React.useState("");

  render(
    <MaskedInput
      mask="(780) 000-0000"
      alwaysShowMask
      onChange={(e) => setTel(e.target.value)}
      value={tel}
      name={data.title}
    >
      {(inputProps) => (
        <input
          ref={register({
            required: true,
            pattern: /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im,
          })}
          value={inputProps.tel}
          name={inputProps.name}
          {...inputProps}
        />
      )}
    </MaskedInput>
  );
};

reactjs forms input-mask
person Anders Kitson    schedule 16.05.2020    source источник
comment
Я предполагаю, что оба модуля пытаются управлять одним и тем же input и конфликтуют друг с другом.   -  person UjinT34    schedule 16.05.2020
comment
это было сделано здесь, вот как я пытался это понять github.com/react-hook-form/react-hook-form/blob/master/examples/   -  person Anders Kitson    schedule 16.05.2020
comment
Вот пример работы с двумя пакетами codeandbox.io/s/trusting-agnesi-rdi5m   -  person Anders Kitson    schedule 16.05.2020
comment
и когда я делаю это как в примере и помещаю компонент внутрь, он говорит, что это не функция и не может быть дочерним элементом.   -  person Anders Kitson    schedule 16.05.2020
comment
Боже, это была моя маска, неправильный формат. Теперь это работает   -  person Anders Kitson    schedule 16.05.2020
comment
@AndersKitson да, я это видел и пробовал, но как это сделать с MatrialUI? С контролируемыми компонентами? Текстовое поле?   -  person Dory Zidon    schedule 13.03.2021
comment
Пробовал: stackoverflow.com/questions/66601928/   -  person Dory Zidon    schedule 13.03.2021

Ответы (3)


arrow_upward
1
arrow_downward

Формат маски был неправильным, нужно было что-то вроде этого

mask="(+7 (999) 999-99-99)"

person Anders Kitson    schedule 16.05.2020

arrow_upward
1
arrow_downward

Чтобы помочь другим

Если вы используете неуправляемые поля ввода (например, собственный ввод), вы можете использовать функцию для маскировки ввода.

Это не может использоваться с контролируемыми полями ввода, такими как (UI материала)

Пример @ component / input.tsx

import React from 'react'
import { Container, ErrorMessage } from './styles'

interface InputProps {
  label?: string | true
  defaultValue?: string
  name?: string
  type?: string
  mask?: (value: string) => string
  placeholder?: string
  disabled?: boolean
  error?: any
  value?: string
  register?: any
}
const Input: React.FC<InputProps> = ({
  label,
  defaultValue,
  name,
  type,
  mask = (value: string) => value,
  value,
  placeholder,
  disabled,
  error,
  register,
  ...inputProps
}) => {
  return (
    <Container>
      {label && (
        <label htmlFor={name}>
          {(typeof label === 'string' && label) ||
            placeholder ||
            'Preencha este campo'}
        </label>
      )}
      <input
        onChange={e => (e.target.value = `${mask(e.target.value)}`)}
        disabled={disabled}
        ref={register}
        id={name}
        name={name}
        type={type}
        value={value}
        placeholder={placeholder}
        defaultValue={defaultValue}
        {...inputProps}
      />
      {error && <ErrorMessage>{error.message}</ErrorMessage>}
    </Container>
  )
}

export default Input

Пример использования @ page / form.tsx

function CPFMask(v: string): string {
  v = v.replace(/\D/g, '')
  v = v.replace(/^(\d{3})(\d)/g, '$1.$2')
  v = v.replace(/^(\d{3})\.(\d{3})(\d)/, '$1.$2.$3')
  v = v.replace(/^(\d{3})\.(\d{3})\.(\d{3})(\d)/, '$1.$2.$3-$4')
  v = v.replace(/^(\d{3})\.(\d{3})\.(\d{3})\/(\d{2})(\d)/, '$1.$2.$3-$4')
  return v.substring(0, 14)
}

...

<Input
      type="text"
      mask={CPFMask}
      placeholder="CPF"
      name="cpf"
      label
      register={register({
        required: {
          value: true,
          message: 'CPF é obrigatório',
        },
        pattern: {
          value: /([0-9]{2}[\.]?[0-9]{3}[\.]?[0-9]{3}[\/]?[0-9]{4}[-]?[0-9]{2})|([0-9]{3}[\.]?[0-9]{3}[\.]?[0-9]{3}[-]?[0-9]{2})/i,
          message: 'CPF inválido',
        },
      })}
      error={errors.cpf}
    />
...
person Emanuel    schedule 03.03.2021
comment
А как насчет Material UI? С ним есть CodeBin. stackoverflow.com/questions/66601928/ - person Dory Zidon; 13.03.2021

arrow_upward
0
arrow_downward

Вот пример, оберните дочерние элементы функцией, давайте подумаем о InputMask как о контроллере, а дочерние элементы - как о рендере. Поэтому я помещаю опору ref для дочерних элементов, чтобы перенаправлять ошибки ref непосредственно дочерним элементам или рендерингу, а не контроллеру.

<InputMask name="npwp" mask="99.999.999.9-999.999">
  {(inputProps) => (
    <input
      {...inputProps}
      ref={register}
      type="text"
      placeholder="Input NPWP"
    />
  )}
</InputMask>
person bl4ckck    schedule 05.07.2021