时间戳

首页 > 解决方案 > Redux-Form 字段未编辑

javascript - Redux-Form 字段未编辑

问题描述

我Field从 Redux-Form 得到这个：

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

我想将初始值传递给 Input 组件initialValue="100"，但现在该值出现在输入中，但我无法编辑它。

这是我的 RenderInput 组件：

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

如何编辑传递给输入的初始值？

标签： javascriptreactjsinputredux-form

解决方案

问题是您设置的值等于initialValue您键入时不会更改的值。初始化组件时，您需要在 redux-store 中设置初始值，然后将valueprop 设置为等于value从商店返回的值。 onUpdate将更新商店，然后应该更新 UI 以反映更改。

推荐阅读