React中如何通过Props为Input组件传递默认值

看起来你是在用react-final-form的Field组件搭配自定义的RenderInput组件，想要给这个数字输入框设置默认值（比如100）对吧？我给你两种靠谱的解决方案：

方案1：通过Form组件的initialValues全局设置（推荐） #

这是react-final-form官方最推荐的方式，能让默认值和表单的状态管理完全同步，避免出现状态不一致的问题。

找到包裹你这个Field组件的Form父组件，给它加上initialValues属性，把"hours"字段的默认值设为100就行：

<Form
  initialValues={{ hours: 100 }} // 在这里设置hours的默认值
  onSubmit={/* 你的提交处理函数 */}
>
  {/* 你的Field组件放在这里 */}
  <Field 
    name="hours" 
    type="number" 
    placeholder="Ingrese las horas para esta categoría" 
    component={RenderInput} 
    onChange={(event) => { 
      handleSubmit(currentValues => this.debounceSubmitProduction({ ...currentValues, hours: event.target.value, }))(); 
    }} 
  />
</Form>

方案2：在RenderInput组件里局部处理默认值 #

如果不想在Form层面统一设置，也可以在自定义的RenderInput组件里处理默认值，不过要记得优先用表单传来的input.value，避免覆盖用户的输入：

修改你的RenderInput组件代码，当input.value为空时，使用默认值100：

const RenderInput = ({ input, type, disabled, readOnly, placeholder, ...rest }) => {
  // 处理默认值：如果表单没有传value，就用100
  const displayValue = input.value ?? 100;
  
  return (
    <input
      {...input}
      type={type}
      disabled={disabled}
      readOnly={readOnly}
      placeholder={placeholder}
      value={displayValue} // 用处理后的value
      {...rest}
    />
  );
};

小提醒 #

别直接给Field组件加value属性哦！react-final-form的Field组件是通过input对象来传递value和onChange的，直接加value会和表单的状态管理冲突，导致输入时出现异常~

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