material UI 中的文本字段验证使用错误属性

Question

我正在尝试在我的 React UI 应用程序中设置错误属性，这样当文本框超过最大字符数时，就会设置错误属性 , 并且文本框以红色突出显示。我基于 https://mui.com/components/text-fields/#validation

的逻辑

但是，只有在用户点击文本框外时才会显示红色；在该事件发生之前，它一直是默认颜色。

你能告诉我是否可以在文本框周围呈现红色错误颜色而无需在文本框外部单击，即当用户在文本框内时。

文本字段：-

<TextField
  fullWidth
  rowsMax={1}
  autoFocus="autofocus"
  className={classes.textField}
  id={modalConfig.textField.id}
  helperText={textInputErrorMessage}
  label={modalConfig.textField.label}
  placeholder={modalConfig.textField.placeholder}
  variant="outlined"
  value={textName}
  onChange={handleTextChange}
  error={textInputError}
/>

和我的功能：-

function handleTextChange(e) {
    setTextName(e.target.value);
    const checkedMaxTextLength = checkMaxTextLength(e.target.value);
    const checkedZeroTextLength = e.target.value.length === 0;
    setSaveDisabled(checkedMaxTextLength || checkedZeroTextLength);
    setTextInputError(checkedMaxTextLength);
    if (checkedMaxTextLength) {
      setTextInputErrorMessage("The input has exceeded the maximum number of characters");
    } else {
      setTextInputErrorMessage(null);
    }
  }

Answer 1

嘿，如果您将 TextField 用作受控组件（您正在使用状态来处理输入值），这很容易实现，您实际上可以执行布尔验证来检查该值是否大于您的值最大长度值显示错误，例如这是使用 10 作为最大值：

import * as React from "react";
import TextField from "@mui/material/TextField";

const MAX_LENGTH = 10;

export default function ValidationTextField() {
  const [text, setText] = React.useState("");
  const [errorMessage, setErrorMessage] = React.useState("");

  React.useEffect(() => {
    // Set errorMessage only if text is equal or bigger than MAX_LENGTH
    if (text.length >= MAX_LENGTH) {
      setErrorMessage(
        "The input has exceeded the maximum number of characters"
      );
    }
  }, [text]);

  React.useEffect(() => {
    // Set empty erroMessage only if text is less than MAX_LENGTH
    // and errorMessage is not empty.
    // avoids setting empty errorMessage if the errorMessage is already empty
    if (text.length < MAX_LENGTH && errorMessage) {
      setErrorMessage("");
    }
  }, [text, errorMessage]);

  return (
    <TextField
      error={text.length >= MAX_LENGTH}
      id="outlined-error"
      label="Error"
      helperText={errorMessage}
      onChange={(e) => setText(e.target.value)}
      value={text}
    />
  );
}

注意我们是如何像这样传递 error 属性的：error={text.length >= MAX_LENGTH} 所以如果你的输入通过了 MAX_LENGTH 它会显示错误，useEffects是检查是否应根据输入文本长度显示错误消息。有了这个，您应该能够根据需要进行验证。如果您想检查结果，这里有一个代码沙箱： https://codesandbox.io/s/validationtextfields-material-demo-forked-x2m45

material UI 中的文本字段验证使用错误属性

Text field validation in material UI using error property

reactjs

material-ui

textbox

material UI 中的文本字段验证使用错误 属性

Text field validation in material UI using error property

reactjs

material-ui

textbox

material UI 中的文本字段验证使用错误属性