如何将默认值传递给React中的输入（使用props）

Question

我有此字段呈现一个Input组件RenderInput。我需要将默认值传递给它，例如value="100"。

      <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,
          }))();
        }}
      />

这是RenderInput组件：

const RenderInput = ({
  input,
  type,
  disabled,
  readOnly,
  placeholder,
  meta: { touched, error },
  onKeyDown,
  innerRef,
}) => (
  <div>
    <input
      {...input}
      type={type}
      disabled={disabled}
      readOnly={readOnly}
      placeholder={placeholder}
      className={`font-300 ${touched && error && 'has-error'}`}
      onKeyDown={onKeyDown}
      ref={innerRef}
    />
  </div>
);

如果我将其value="100"放入RenderInput组件中，则可以正常工作，但是如果我尝试将该值作为prop传递给RenderInput组件，则它将不起作用。如何将属性value从传递<Field />给RenderInput？

Answer 1

https://reactjs.org/docs/un受控组件.html＃default-values

对于不受控制的组件，您通常希望React指定初始值，但使后续更新不受控制。要处理这种情况，您可以指定defaultValue属性而不是value。