如何在MUI选择型TextField中显示自定义值？

要实现选择选项后在TextField中显示自定义文本，你可以利用MUI TextField组件的renderValue属性，它允许你自定义选中值的展示内容。

修改后的完整代码 #

import React from 'react';
import { TextField, MenuItem } from '@mui/material';

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = React.useState('');

  const handleChange = (event) => {
    setSelectedOption(event.target.value);
  };

  // 自定义选中值的渲染逻辑
  const renderSelectedValue = (value) => {
    if (!value) {
      return ''; // 未选择时保持空，也可改为自定义提示如"请选择选项"
    }
    // 映射value与对应选项文本，方便后续维护
    const optionLabels = {
      option1: 'Option 1',
      option2: 'Option 2',
      option3: 'Option 3'
    };
    return `${optionLabels[value]} selected`;
  };

  return (
    <TextField 
      id="select-option" 
      select 
      label="Select an option" 
      value={selectedOption} 
      onChange={handleChange}
      renderValue={renderSelectedValue} // 启用自定义渲染
    >
      <MenuItem value="option1">Option 1</MenuItem>
      <MenuItem value="option2">Option 2</MenuItem>
      <MenuItem value="option3">Option 3</MenuItem>
    </TextField>
  );
};

export default MyComponent;

关键说明 #

• renderValue函数接收当前选中的value作为参数，返回你想要展示的内容（支持字符串或JSX元素）。
• 用optionLabels对象做value和选项文本的映射，后续新增选项时只需更新这个对象，无需修改多处代码。
• 若要在未选择状态显示提示，可把空值处理逻辑改为return '请选择一个选项';

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