如何禁止带select属性的Material UI TextField输入框显示MenuItem的复选框

解决方法 #

你遇到的输入框显示复选框的问题，按以下步骤调整即可实现需求：

核心原因 #

当Select组件的渲染逻辑与你配置的选中值渲染规则不匹配时，会直接将选中MenuItem的完整子元素（包含你写的复选框）渲染到输入框区域。

场景1：多选带复选框（你当前代码的预期场景） #

你当前代码中注释了multiple属性，导致进入单选模式，你写的数组拼接字符串的renderValue逻辑无法生效，按如下调整即可：

1. 取消TextField上multiple属性的注释，开启多选模式
2. 保留现有renderValue逻辑，输入框会自动按你配置的规则显示选中姓名用逗号拼接的结果，不会渲染复选框

修改后的核心代码片段：

<TextField
  multiple // 取消这行的注释
  select
  value={personName}
  onChange={handleChange}
  renderValue={(selected) => selected.join(", ")}
  MenuProps={MenuProps}
>

场景2：单选场景（不需要多选） #

如果你业务上只需要单选，不需要开启multiple属性，按如下调整即可：

1. 将状态默认值改为空字符串：

const [personName, setPersonName] = React.useState("");

2. 修改renderValue逻辑适配单选值：

renderValue={(selected) => selected}

完整可运行代码（多选场景） #

import * as React from "react";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import ListItemText from "@mui/material/ListItemText";
import Checkbox from "@mui/material/Checkbox";
import TextField from "@mui/material/TextField";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250
     }
  }
};

const names = ["Oliver Hansen", "Van Henry"];

export default function MultipleSelectCheckmarks() {
  const [personName, setPersonName] = React.useState([]);

  const handleChange = (event) => {
    const {
      target: { value }
    } = event;
    setPersonName(
      // 自动填充场景下会拿到字符串格式的值，做兼容处理
      typeof value === "string" ? value.split(",") : value
    );
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: 300 }}>
        <TextField
          multiple
          select
          value={personName}
          onChange={handleChange}
          renderValue={(selected) => selected.join(", ")}
          MenuProps={MenuProps}
        >
          {names.map((name) => (
            <MenuItem key={name} value={name}>
              <Checkbox checked={personName.indexOf(name) > -1} />
              <ListItemText primary={name} />
            </MenuItem>
          ))}
        </TextField>
      </FormControl>
    </div>
  );
}

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