如何在MUI React的FormInputText组件中添加非错误型helperText

要在保留错误提示功能的基础上添加描述性helperText，只需按以下步骤修改：

1. 新增helperText属性到组件参数和Props接口 #

先给FormInputText组件的参数列表添加helperText，同时在FormInputProps接口中声明这个可选属性：

// 在FormInputProps.tsx中补充
export interface FormInputProps {
  // 原有属性...
  helperText?: string; // 新增描述性helperText属性
}

2. 调整组件内helperText的渲染逻辑 #

在TextField的helperText属性中设置优先级：错误信息优先显示，无错误时展示自定义描述文本：

import { Controller } from "react-hook-form";
import TextField from "@mui/material/TextField";
import { FormInputProps } from "./FormInputProps";
import { FormHelperText } from "@mui/material";

export const FormInputText = ({
  name,
  control,
  label,
  required = false,
  type = "text",
  disabled = false,
  big = false,
  score = false,
  helperText, // 新增接收helperText参数
}: FormInputProps) => {
  return (
    <Controller
      name={name}
      control={control}
      render={({
        field: { onChange, value },
        fieldState: { error },
        formState,
      }) => {
        return (
          <TextField
            style={{ marginBottom: "25px" }}
            // 核心逻辑：有错误显示错误信息，无错误时显示自定义helperText
            helperText={error ? error.message : helperText ?? null}
            size={!big ? "small" : "medium"}
            error={!!error}
            onChange={onChange}
            fullWidth
            label={label}
            variant="outlined"
            value={value}
            required={required}
            type={type}
            disabled={disabled}
          />
        );
      }}
    />
  );
};

3. 使用示例 #

现在调用组件时可传入描述性文本，错误提示功能不受影响：

// 带描述性提示的用法
<FormInputText
  name="username"
  control={control}
  label="用户名"
  helperText="请输入3-16位字母或数字"
/>

// 字段验证失败时，自动显示错误信息，覆盖描述文本
<FormInputText
  name="username"
  control={control}
  label="用户名"
  helperText="请输入3-16位字母或数字"
/>

这样修改后，既保留了原有的错误提示能力，又能给需要的字段添加友好的描述说明，完全满足需求。

内容的提问来源于stack exchange，提问作者mike