MUI下拉选值填充TextField后无法编辑的技术问询

问题原因 #

你的TextField无法编辑，核心原因是它们作为受控组件，仅绑定了value属性却没有对应的onChange事件触发状态更新。当前代码中，item状态仅在下拉选择时更新，TextField的值完全依赖选中的item对象，用户输入无法修改状态，因此呈现只读状态。

解决方案 #

将TextField的内容维护为独立的可编辑状态，下拉选择时用选中项的内容初始化该状态，同时为每个TextField添加onChange事件支持用户编辑。

修改后的完整代码 #

import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import Box from '@mui/material/Box';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import TextField from '@material-ui/core/TextField';

export default function DropDown() {
  // 存储下拉选中的完整对象
  const [selectedItem, setSelectedItem] = useState(null);
  // 存储可编辑的表单数据
  const [formData, setFormData] = useState({
    description: '',
    value: ''
  });

  const handleSelectChange = (event: SelectChangeEvent) => {
    const selected = event.target.value;
    setSelectedItem(selected);
    // 用选中项初始化表单数据
    setFormData({
      description: selected.description || '',
      value: selected.value || ''
    });
  };

  // 通用的输入变更处理函数
  const handleInputChange = (field: string) => (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData(prev => ({
      ...prev,
      [field]: event.target.value
    }));
  };

  const items = useSelector(state => state.itemsOverview.items);

  return (
    <>
      <Box
        component="form"
        sx={{
          '& .MuiTextField-root': { m: 1, width: '25ch' }
        }}
        noValidate
        autoComplete="off"
      >
        <FormControl variant="standard" sx={{ m: 1 }} fullWidth>
          <Select
            labelId="demo-simple-select-standard-label"
            id="demo-simple-select-standard"
            value={selectedItem || ''}
            onChange={handleSelectChange}
          >
            {items.map(item => (
              <MenuItem key={item.id} value={item}>
                {item.id}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Box>
      <TextField
        multiline
        fullWidth
        variant="filled"
        label="Description"
        value={formData.description}
        onChange={handleInputChange('description')}
        margin="normal"
      />
      <TextField
        multiline
        fullWidth
        variant="filled"
        label="Value"
        value={formData.value}
        onChange={handleInputChange('value')}
        margin="normal"
      />
    </>
  );
}

关键修改点 #

• 拆分状态：用selectedItem存储下拉选中的完整对象，formData独立存储可编辑的描述与值，分离选中状态和编辑状态
• 添加输入处理函数：handleInputChange通过字段名动态更新formData，统一处理两个TextField的输入变更
• 下拉选时初始化表单：在handleSelectChange中同步选中项的内容到formData
• 绑定onChange事件：让用户输入能够触发状态更新，实现可编辑功能
• 修正初始状态：selectedItem初始化为null，匹配下拉项的对象类型

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