自定义 MUI 字段 (<TextField />) 无法识别值的更改

Question

我正在尝试创建自定义表单组件，因此如果我决定更改样式，则不需要更新每个项目。

ReportSelect

版本不会在选择菜单项时更新值，并且

ReportTextField

仅适用于第一个实例（即设置值）。有没有办法做到这一点？我最初尝试使用

styled()

，但我不知道如何赋予它

fullwidth

、

variant

等属性。

这是我的组件

export const ReportSelect = (props) => {
  return (
    <TextField 
    select
    fullWidth
    variant='filled'
    margin='dense'
    size='small'
    label={props.label}
    value={props.value}
    onChange={props.set}>
      
      {props.items.map(item => (
        <MenuItem key={item} value={item}>{item}</MenuItem>
      ))}

    </TextField>
  );
}

export const ReportTextField = (props) => {
return (
    <TextField 
       fullWidth
       type='text'
       id='filled-basic'
       variant='filled'
       label={props.label}
       value={props.value}
       onChange={props.set}
    />
    );
};

这是我的使用方法：

<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)}
/>

下拉菜单显示了两个选项，从视觉上看一切都在那里，但值不会在选择时更新。对于后者，只有第一个实例更新值，具有相同标签的其他表单组件不起作用。

Answer 1

您的问题似乎与您传递给自定义组件的属性以及它们在组件本身内部的处理方式有关。具体来说，ReportSelect 组件中的 onChange 属性命名不匹配，并且值和 onChange 的管理方式可能存在问题。

const ReportSelect = ({ label, value, onChange, items }) => {
  return (
    <TextField 
      select
      fullWidth
      variant='filled'
      margin='dense'
      size='small'
      label={label}
      value={value}
      onChange={onChange}
    >
      {items.map(item => (
        <MenuItem key={item} value={item}>{item}</MenuItem>
      ))}
    </TextField>
  );
};

const ReportTextField = ({ label, value, onChange }) => {
  return (
<TextField 
  fullWidth
  type='text'
  variant='filled'
  label={label}
  value={value}
  onChange={onChange}
/>
  );
};