自定义MUI TextField/ReportSelect组件值无法更新问题求助

问题1：ReportSelect选中值不更新 #

你的组件内部将onChange回调错误绑定到了props.set，但实际使用时传递的是标准onChange属性，导致TextField的选中事件没有触发状态更新。只需把组件内的props.set替换为props.onChange即可。

问题2：ReportTextField仅第一个实例生效 #

所有TextField实例共用固定idfilled-basic，而HTML要求id必须唯一，这会导致浏览器无法正确识别后续输入框。解决方法是生成动态id，可基于label或从props接收自定义id。

修复后的完整组件代码 #

export const ReportSelect = (props) => {
  return (
    <TextField 
      select
      fullWidth
      variant='filled'
      margin='dense'
      size='small'
      label={props.label}
      value={props.value}
      onChange={props.onChange} // 修正为props.onChange
      {...props} // 透传其他属性，方便后续扩展
    >
      {props.items.map(item => (
        <MenuItem key={item} value={item}>{item}</MenuItem>
      ))}
    </TextField>
  );
}

export const ReportTextField = (props) => {
  // 生成动态唯一id，优先使用props传入的id
  const inputId = props.id || `filled-${props.label.toLowerCase().replace(' ', '-')}`;
  
  return (
    <TextField 
       fullWidth
       type='text'
       id={inputId} // 使用动态id
       variant='filled'
       label={props.label}
       value={props.value}
       onChange={props.onChange}
       {...props} // 透传其他属性
    />
  );
};

使用示例（保持原代码即可） #

<ReportSelect
  label="Sex"
  value={sex}
  onChange={(e) => setSex(e.target.value)}
  items={['Female', 'Male']}
/>

<ReportTextField
  label="Last Name"
  value={lastName}
  onChange={(e) => setLastName(e.target.value)}
/>

<ReportTextField
  label="First Name"
  value={firstName}
  onChange={(e) => setFirstName(e.target.value)}
/>

关于styled()传递属性的问题 #

如果使用Material-UI的styled方法封装组件，想要支持fullWidth、variant等属性，可通过透传props或在styled逻辑中根据props动态调整样式：

import { styled } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

// 自定义styled组件，支持根据props调整样式
const StyledTextField = styled(TextField)(({ fullWidth, variant, theme }) => ({
  margin: theme.spacing(1),
  // 根据props动态应用样式
  ...(fullWidth && { width: '100%' }),
}));

export const ReportTextField = (props) => {
  const inputId = props.id || `filled-${props.label.toLowerCase().replace(' ', '-')}`;
  
  return (
    <StyledTextField
       type='text'
       id={inputId}
       label={props.label}
       value={props.value}
       onChange={props.onChange}
       {...props} // 透传fullWidth、variant等属性
    />
  );
};

使用时可灵活配置属性：

<ReportTextField
  label="Email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  fullWidth={false} // 覆盖默认fullWidth
  variant="outlined" // 切换样式变体
/>

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