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

我有一个字段，用于呈现输入组件

RenderInput

。我需要向它传递一个默认值，类似于

value=“100”

{
handleSubmit（currentValues=>this.debounceSubmit）({
…当前值，
小时数：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>
);

const RenderInput=({
输入
类型
残废
只读，
占位符，
meta:{触摸，错误}，
onKeyDown，
innerRef，
}) => (
);

如果我将

value=“100”

放在RenderInput组件内部，它可以正常工作，但是如果我尝试将该值作为道具传递给RenderInput组件，它就不起作用。如何将属性

值
从
传递到RenderInput？

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

您有几个选项，您的问题是错误的，因为默认值是通过
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,
          }))();
        }}
      />

这意味着传递给
input
键的任何内容都将被分解为prop to input，因此如果需要发送值，则必须执行
input={{value:100}
操作，而不是
value=100
此属性不会被分解

如果希望有默认值，可以只向RenderInput添加static

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

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

编辑

还有一个是克隆函数

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

或
{
handleSubmit（currentValues=>this.debounceSubmit）({
…当前值，
小时数：event.target.value，
}))();
}}
/>

然后

const RenderInput=({
输入
类型
残废
只读，
占位符，
meta:{触摸，错误}，
onKeyDown，
innerRef，
一些价值
}) => (
);
背负此答案：如果不希望用户控制输入的状态，请仅使用
defaultValue
属性。如果他们要更改输入，请使用
值
属性。这将使输入受到控制，并将通过从父组件传递到字段组件的
setState
函数进行更新。这是我以前用
value
和
defaultValue
尝试过的方法，但都不起作用：（您在console中是否收到任何错误？以及答案更新错误是：
Uncaught（承诺中）TypeError:无法读取null的属性'replaceChild'
我希望默认值为空字符串，但当我传递带有默认值的道具时，显示该值。我尝试了此操作，但无效：（错误是：
Uncaught（在promise中）TypeError:无法读取null的属性'replaceChild'
您可以在具有
静态defaultProps={}
的组件上设置默认值，并且在无状态组件（您在渲染输入上具有）上设置默认值，正如我上面所述，
RenderInput.defaultProps={input:{value:100}
除非您提供关于未捕获错误的完整示例，否则该错误可能与您提出的问题无关
const ComponentWithProps = React.CloneElement(RenderInput, { props })

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