typescript 在材质UI多行文本字段中显示蒙版文本并检索未蒙版文本

cyej8jka 于 2023-08-07 发布在 TypeScript

关注(0)|答案(1)|浏览(126)

我正在利用Material UI TextField组件为消息创建多行（文本区域）输入。我的目标是在GUI中呈现文本的屏蔽版本，同时保留未屏蔽的文本值。这样，用户会感觉到屏蔽的输入，但我可以根据需要处理未屏蔽的值。
下面是TextArea组件的代码：

import React, { useState, ChangeEvent } from "react";
import { TextField, Box } from "@mui/material";

// Mask utility function
export function mask(str: string): string {
  return str ? UNICODE_BULLET_CHARACTER.repeat(str.length) : str;
}

interface TextAreaProperties {
  minRows: number;
  maxRows: number;
  label: string;
  placeholder: string;
  required: boolean;
  onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
  error: boolean;
  helperText: string;
  maxLength: number;
}

function TextArea({
  minRows,
  maxRows,
  label,
  placeholder,
  required,
  onChange,
  error,
  helperText,
  maxLength,
}: TextAreaProperties) {
  const [text, setText] = useState("");
  const [maskInput, setMaskInput] = useState(false);

  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
    setText(event.target.value);
    onChange(event);
  };

  return (
    <TextField
      multiline
      label={label}
      minRows={minRows}
      maxRows={maxRows}
      placeholder={placeholder}
      required={required}
      onChange={handleChange}
      error={error}
      style={{ width: "60ch" }}
      inputProps={{ maxLength }}
      helperText={
        <Box component="span" display="flex" justifyContent="space-between">
          <span>{helperText}</span>
          <span>{`${text.length}/${maxLength}`}</span>
        </Box>
      }
      value={mask(text)}
    />
  );

字符串
目前，TextField组件中显示的文本反映了屏蔽值。然而，当我在handleChange函数中使用event.target.value检索值时，我获得了masked文本，使进一步的处理变得复杂。
如何在多行TextField中显示掩码字符串，同时在必要时仍然获得未掩码的值？

**回答指南：**我非常感谢解决方案提供如何使用Material UI的TextField组件和React实现此行为的明确指导，考虑到多行输入要求。深入了解在类似的多行文本区域场景中掩蔽和检索值的最佳实践将非常有价值。

typescript

来源：https://stackoverflow.com/questions/76840922/display-masked-text-in-material-ui-multiline-textfield-and-retrieve-unmasked-tex

1条答案

按热度按时间

vfh0ocws1#

这里有一些你可以尝试的东西，它在实现这一点上是非常肤浅的，但你可以尝试和摆弄它。

import * as React from "react";
import { TextField, Box, Typography } from "@mui/material";

const UNICODE_BULLET_CHARACTER = "\u2022";

// Mask utility function
export function mask(str: string): string {
  const s = str ? str.replaceAll(/[^\n]/gi, UNICODE_BULLET_CHARACTER) : str;
  return s;
}

interface TextAreaProperties {
  minRows: number;
  maxRows: number;
  label: string;
  placeholder: string;
  required: boolean;
  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
  error: boolean;
  helperText: string;
  maxLength: number;
}

export default function TextArea({
  minRows,
  maxRows,
  label,
  placeholder,
  required,
  onChange,
  error,
  helperText,
  maxLength
}: TextAreaProperties) {
  const [text, setText] = React.useState("");
  const [maskInput, setMaskInput] = React.useState("");

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setText(event.target.value);
    setMaskInput(mask(event.target.value));
  };

  return (
    <TextField
      multiline
      label={label}
      minRows={minRows}
      maxRows={maxRows}
      placeholder={placeholder}
      required={required}
      onChange={handleChange}
      error={error}
      style={{ maxWidth: "60ch", width: "60ch", maxHeight: "60ch", height: "60ch", color: "transparent" }}
      inputProps={{
        maxLength,
        sx: {
          color: "transparent",
          width: "0.2px !important",
          height: "20px !important",
          caretColor: "black"
        }
      }}
      InputProps={{
        startAdornment: (
          <Typography
          onClick={(event) => {event.target.nextSibling.focus();}}
            sx={{
              p: 0,
              m: 0,
              whiteSpace: "pre",
              fontWeight: "bold",
              fontSize: "1.5rem",
              lineHeight: 0.9,
              verticalAlign: "middle",
              display: "table-cell",
              color: "black",
              width: "inherit",
              wordBreak: "break-all",
              textOverflow: "clip",
              overflow: "hidden",
            }}
          >{`${maskInput}`}</Typography>
        )
      }}
      helperText={
        <Box component="span" display="flex" justifyContent="space-between">
          <span>{helperText}</span>
          <span>{`${text.length}/${maxLength}`}</span>
        </Box>
      }
      value={text}
    />
  );
}

字符串
这里有一个Codesandbox link。

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

我来回答

typescript 在材质UI多行文本字段中显示蒙版文本并检索未蒙版文本

1条答案

相关问题

热门标签

最新问答