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

Question

I have this Field that renders an Input component RenderInput . I need to pass a default value to it, something like 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,
          }))();
        }}
      />

This is the RenderInput component:

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>
);

If I put value="100" inside the RenderInput component, it works fine, but If I try to pass that value as a props to the RenderInput component, it doesn't work. How can I pass the property value from <Field /> to RenderInput?

Answer 1

https://reactjs.org/docs/uncontrolled-components.html#default-values

With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value .

Answer 2

Well you have several options and your question is wrong as default value is done via defaultProps but what you can do is

<Field
        name="hours"
        type="number"
        placeholder="Ingrese las horas para esta categoría"
        component={() => (<RenderInput input={{ value: 100 }}/> )}
        onChange={(event) => {
          handleSubmit(currentValues => this.debounceSubmitProduction({
            ...currentValues,
            hours: event.target.value,
          }))();
        }}
      />

please pay attention how it's destructured inside RenderInput

const RenderInput = ({
  input,
  type,
  disabled,
  readOnly,
  placeholder,
  meta: { touched, error },
  onKeyDown,
  innerRef,
}) => (

this means anything passed on input key will be destructured as prop to input, so if you need to send value you have to do input={{value: 100}} instead of value=100 this prop is not destructured.

If you want to have default value, you can just add static to RenderInput

RenderInput.defaultProps = {
  input: { value: 100 }
}

EDIT

There is alsoclone function

const ComponentWithProps = React.CloneElement(RenderInput, { props })

or

Answer 3

  <Field
    name="hours"
    type="number"
    someValue='100'
    placeholder="Ingrese las horas para esta categoría"
    component={RenderInput}
    onChange={(event) => {
      handleSubmit(currentValues => this.debounceSubmitProduction({
        ...currentValues,
        hours: event.target.value,
      }))();
    }}
  />

Then

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