Redux-Form——使用 »retype« 创建密码字段

Question

我正在构建一个 redux 表单，我想创建一个 »Retype Password« 字段，该字段呈现在密码字段旁边。我有这个代码：

const renderRow = (field) => {
  return (
    <div className={`form-row ${field.type}`}>
      <label>{field.label}</label>
      <Field field={field} component={renderPassword} name={field.name} />
    </div>
  );
}


const renderPassword = ({field, input, meta: { error, touched }}) => {
  return (
    <div className="password-inputs-wrap">
      <input type="password" {...input} />
      <input type="password" {...input} name="password-retype" />
      {touched && error && <RenderError error={error} />}
    </div>
  );
}

现在这会呈现两个密码字段，但更改一个会同时更改另一个。

renderRow 在这里有点简化，因为该字段的组件并未像此处所示那样进行硬编码。所以这个密码字段是一个例外，因为它由两个 <input> 组成。对于由单个 <input>/<select /> 等组成的所有其他字段，它工作正常。

我怎样才能将这个重新输入 <input> 与第一个重新输入“分离”？

Answer 1

您需要两个字段（两个 Fields）。

Redux-Form——使用 »retype« 创建密码字段

Redux-Form—Create Password Field with »retype«

reactjs

redux-form