Material UI TextField Select组件无法设置值，handleChange不触发

你的问题出在MUI TextField（select模式）的onChange回调参数处理以及state更新的闭包问题上，以下是具体修复步骤：

1. 修正Select组件的onChange回调 #

MUI的Select组件（通过TextField的select属性实现）的onChange回调会返回两个参数：event和newValue，直接依赖event.target.value可能出现异常，更可靠的方式是使用第二个参数newValue。

2. 用函数式更新state避免闭包问题 #

当更新state依赖之前的state时，推荐使用setState的函数形式，确保拿到最新的state值，避免因闭包导致的旧值覆盖。

3. 修复表单提交逻辑 #

原handleFormSubmit的参数错误，表单的onSubmit回调接收的是event对象，需要先阻止默认刷新行为，再使用formValues提交数据。

修改后的完整代码：

const Category = () => {
    const theme = useTheme();
    const colors = tokens(theme.palette.mode);

    const [formValues, setformValues] = useState({
        categoryName: "Test",
        categoryType: "Expense",
    })

    const categories = [
        {
            value: 'Income',
            label: 'Income',
        },
        {
            value: 'Expense',
            label: 'Expense',
        },
    ];
    
    // 修复表单提交逻辑
    const handleFormSubmit = (event) => {
        event.preventDefault(); // 阻止页面默认刷新
        console.log(`Submitting : ${JSON.stringify(formValues)}`);
        // 这里可以添加提交到API的逻辑，比如fetch/post请求
    };
    
    const isNonMobile = useMediaQuery("(min-width:600px)");
    
    const handleCategoryTextChange = (event) => {
        // 用函数式更新state
        setformValues(prev => ({
            ...prev,
            categoryName: event.target.value,
        }))
    }
    
    // 修正Select的onChange回调
    const handleCategoryChange = (event, newValue) => {
        console.log(`Selected Category Type: ${newValue}`);
        // 用函数式更新state
        setformValues(prev => ({
            ...prev,
            categoryType: newValue
        }));
    };

    return (
        <Box>
            <Box m="20px">
                <Header title="CREATE CATEGORY" subtitle="Create a New Category" />

                <form onSubmit={handleFormSubmit}>
                    <Box
                        display="grid"
                        gap="30px"
                        gridTemplateColumns="repeat(4, minmax(0, 1fr))"
                        sx={{
                            "& > div": { gridColumn: isNonMobile ? undefined : "span 4" },
                        }}
                    >
                        <TextField
                            fullWidth
                            variant="filled"
                            type="text"
                            label="Category Name"
                            onChange={handleCategoryTextChange}
                            value={formValues.categoryName}
                            name="categoryName"
                            sx={{ gridColumn: "span 2" }}
                        />
                        <TextField
                            fullWidth
                            variant="filled"
                            label="Category Type"
                            onChange={handleCategoryChange}
                            value={formValues.categoryType}
                            name="categoryType"
                            sx={{ gridColumn: "span 2" }}
                            select
                        >
                            {categories.map((option) => (
                                <MenuItem key={option.value} value={option.value}>
                                    {option.label}
                                </MenuItem>
                            ))}
                        </TextField>
                    </Box>
                    {/* 补充提交按钮，否则无法触发表单提交 */}
                    <Box mt="20px">
                        <Button type="submit" variant="contained">
                            创建分类
                        </Button>
                    </Box>
                </form>

            </Box>
        </Box>
    );
};

关键修改点说明： #

• Select onChange：改用第二个参数newValue直接获取选中值，比event.target.value更稳定
• State更新：所有setformValues都使用函数式更新prev => ({...prev, ...})，确保基于最新state修改
• 表单提交：添加event.preventDefault()阻止页面刷新，直接使用组件内的formValues作为提交数据
• 新增提交按钮：原代码缺少提交按钮，无法触发onSubmit事件，补充后才能完成完整的表单提交流程

这样修改后，下拉选单就能正常选择，onChange事件也会触发，同时表单提交逻辑也能正常工作，后续你可以在handleFormSubmit中添加API请求代码，把formValues发送到后端接口。

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