React自定义组件添加maxLength、value属性失效问题求助（基于MUI模板）

1. 默认value不生效的原因及解决 #

你用的Field是react-final-form的受控表单组件，字段值由表单状态统一管理，直接在Field上写value属性会被表单状态覆盖，因此不生效。

解决方法：
在包裹Field的Form组件中通过initialValues指定默认值，示例：

<Form
  onSubmit={handleSubmit}
  initialValues={{ password: 'abc' }} // 这里设置密码默认值
  validate={validate}
>
  {/* 你的Field组件放在此处 */}
</Form>

2. maxLength不生效的原因及解决 #

Field不会自动把所有props透传给它的component（即RFTextField），且RFTextField作为MUI TextField的封装，需要将maxLength放到inputProps里才能传递到底层input元素。

解决方法有两种：

方法一：通过inputProps传递maxLength #

直接在Field上添加inputProps属性传递maxLength：

<Field
  fullWidth
  component={RFTextField}
  disabled={submitting || sent}
  required
  name="password"
  autoComplete="new-password"
  label="Password"
  type="password"
  margin="normal"
  inputProps={{ maxLength: 8 }} // 生效的maxLength设置方式
/>

方法二：使用render prop手动传递属性 #

如果方法一不生效，改用Field的render prop模式，手动传递所需属性：

<Field
  name="password"
  render={({ input, meta }) => (
    <RFTextField
      {...input}
      fullWidth
      disabled={submitting || sent}
      required
      autoComplete="new-password"
      label="Password"
      type="password"
      margin="normal"
      maxLength={8}
      error={meta.touched && meta.error}
      helperText={meta.touched && meta.error}
    />
  )}
/>

这样既能保证maxLength生效，也能保留react-final-form的表单状态管理功能。

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