React中如何根据Material UI选择菜单项动态修改输入框placeholder

实现逻辑非常简单，核心是利用React状态同步选择菜单的选中值，再动态生成对应占位文本即可，具体步骤如下：

• 声明状态存储当前选中的搜索类型，默认值可设为三个选项中的任意一个，比如name
• 将Material UI 选择菜单的选中值与状态绑定，切换选项时同步更新状态
• 输入框的placeholder属性直接根据当前状态值拼接生成对应文本

完整可运行代码示例：

// 引入需要的依赖
import { useState } from 'react';
import { FormControl, InputLabel, Select, MenuItem, TextField, Box } from '@mui/material';

function SearchComponent() {
  // 声明状态存储当前选中的搜索类型，默认值为name
  const [searchType, setSearchType] = useState('name');

  // 选择菜单变更时更新状态
  const handleTypeChange = (e) => {
    setSearchType(e.target.value);
  };

  return (
    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', p: 2 }}>
      {/* 搜索类型选择菜单 */}
      <FormControl sx={{ minWidth: 120 }}>
        <InputLabel id="search-type-label">搜索类型</InputLabel>
        <Select
          labelId="search-type-label"
          value={searchType}
          label="搜索类型"
          onChange={handleTypeChange}
        >
          <MenuItem value="name">姓名</MenuItem>
          <MenuItem value="email">邮箱</MenuItem>
          <MenuItem value="phone">手机号</MenuItem>
        </Select>
      </FormControl>

      {/* 搜索输入框，placeholder动态生成 */}
      <TextField
        label="搜索内容"
        variant="outlined"
        placeholder={`Search by ${searchType}`}
      />
    </Box>
  );
}

export default SearchComponent;

如果需要显示中文占位文本，提前定义值和文本的映射关系即可：

const typeTextMap = {
  name: '姓名',
  email: '邮箱',
  phone: '手机号'
}
// 输入框placeholder修改为以下写法即可
placeholder={`请输入${typeTextMap[searchType]}`}

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