具有多行的 MUI TextField - 关于缺少 id/name 的警告

Question

我遇到这个问题，一旦我将“多行”添加到我的 Material UI (MUI) TextField，我的浏览器就会显示警告“表单字段元素应具有 id 或 name 属性”。它工作正常，但警告表明有些东西已经关闭。一旦我删除“多行”，警告就消失了。

谁知道如何摆脱这个警告？

import { styled } from "@mui/material/styles";
import TextField from "@mui/material/TextField";

const StyledTextArea = styled(TextField)(({ theme }) => ({
  "& .MuiInputBase-root": {
    "& .MuiInputBase-colorPrimary": { color: "#001E43" },
  },
  "& label.Mui-focused": {
    color: "#001E43",
  },
  "& .MuiOutlinedInput-root": {
    "&.Mui-focused fieldset": {
      borderColor: "#001E43",
    },
  },
}));

function InputMultipleField({
  type,
  item,
  setItem,
  label,
  guidance,
  maxLength,
  errorNotice,
}) {
  const [guide, setGuide] = useState(false);
  return (
    <div className="mb-4 flex flex-col">
      <div className="mb-2 flex w-full items-center">
        <StyledTextArea
          label={label}
          id={label}
          autoComplete="off"
          type={type}
          inputProps={{ maxLength: maxLength }}
          multiline
          rows={6}
          value={item || ""}
          onChange={(e) => {
            setItem(e.target.value);
          }}
          className="w-full "
          error={!!errorNotice}
          size="small"
        />
       
    </div>
  );
}

export default InputMultipleField;

Answer 1

要解决此警告，您可以向 TextField 组件添加 id 或 name 属性。在您的情况下，您可以设置 id 属性以匹配标签以实现可访问性。这是添加了 id 属性的代码的更新版本：（未经测试）

import { styled } from "@mui/material/styles";
import TextField from "@mui/material/TextField";

const StyledTextArea = styled(TextField)(({ theme }) => ({
  "& .MuiInputBase-root": {
    "& .MuiInputBase-colorPrimary": { color: "#001E43" },
  },
  "& label.Mui-focused": {
    color: "#001E43",
  },
  "& .MuiOutlinedInput-root": {
    "&.Mui-focused fieldset": {
      borderColor: "#001E43",
    },
  },
}));

function InputMultipleField({
  type,
  item,
  setItem,
  label,
  guidance,
  maxLength,
  errorNotice,
}) {
  const [guide, setGuide] = useState(false);
  return (
    <div className="mb-4 flex flex-col">
      <div className="mb-2 flex w-full items-center">
        <StyledTextArea
          label={label}
          id={label}  // Add the id attribute here
          autoComplete="off"
          type={type}
          inputProps={{ maxLength: maxLength }}
          multiline
          rows={6}
          value={item || ""}
          onChange={(e) => {
            setItem(e.target.value);
          }}
          className="w-full "
          error={!!errorNotice}
          size="small"
        />
      </div>
    </div>
  );
}

export default InputMultipleField;