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

Question

我有这个字段，它呈现一个输入组件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 组件中，它可以正常工作，但如果我尝试将该值作为道具传递给 RenderInput 组件，它就不起作用。如何将属性 value 从 <Field /> 传递到 RenderInput？

Answer 1

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

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

Answer 2

嗯，你有几个选择，你的问题是错误的，因为默认值是通过 defaultProps 完成的，但你可以做的是

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

请注意它在 RenderInput 中是如何解构的

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

这意味着在input 键上传递的任何内容都将被解构为输入道具，因此如果您需要发送值，则必须使用input={{value: 100}} 而不是value=100，此道具不会被解构。

如果你想有默认值，你可以添加静态到 RenderInput

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

编辑

还有克隆功能

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

或

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

然后

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