redux-form 如何在输入字段中具有初始值

Question

我使用 redux-form 作为我的表单，如下示例：https://redux-form.com/8.3.0/docs/api/fields.md/

因此 如下所示：

<Fields
  names={['firstName', 'lastName']}
  component={input}
  validate={{
    firstName: (value, allValues, props, name) => 'error'
  }}
  warn={{
    lastName: (value, allValues, props) => 'warning'
  }}
/>

字段组件我渲染的是这个

const renderFields = (fields) => (
  <div>
    <div className="input-row">
      <input {...fields.firstName.input} type="text"/>
      {fields.firstName.meta.touched && fields.firstName.meta.error &&
       <span className="error">{fields.firstName.meta.error}</span>}
    </div>
    <div className="input-row">
      <input {...fields.lastName.input} type="text"/>
      {fields.lastName.meta.touched && fields.lastName.meta.error &&
       <span className="error">{fields.lastName.meta.error}</span>}
    </div>
  </div>
)

到目前为止一切顺利，表单显示了 2 个输入字段，我可以向其中添加值。

但是如何将默认值传递到输入中？

当我将 value 属性添加到 input 中时，我之后无法编辑输入。

例如，我添加 value 属性，其值如下：

const renderFields = (fields) => (
  <div>
    <div className="input-row">
      // add value="my name"
      <input {...fields.firstName.input} type="text" value="my name" />
      {fields.firstName.meta.touched && fields.firstName.meta.error &&
       <span className="error">{fields.firstName.meta.error}</span>}
    </div>
    <div className="input-row">
       // add value="my last name"
      <input {...fields.lastName.input} type="text" value="my last name" />
      {fields.lastName.meta.touched && fields.lastName.meta.error &&
       <span className="error">{fields.lastName.meta.error}</span>}
    </div>
  </div>
)

这样，输入始终具有相同的初始值。 有关如何设置默认值并能够编辑它的任何帮助，谢谢。

Answer 1

当您提供 value 属性时，您还需要提供 onChange 函数并处理状态 - https://reactjs.org/docs/forms.html#control-components

和来自 redux-form 文档：https://redux-form.com/8.3.0/docs/api/field.md/#-code-onchange-event-newvalue-previousvalue-name-gt-void-code-可选-< /a>

Answer 2

您需要一个状态变量来保存输入值。

const [inputValue, setInputValue] = useState('');

在input标签中，使用之前声明的状态变量作为value &在input的onChange中，将输入值设置为目标值。

<input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)} />

Answer 3

您可以使用 prop defaultValue，如 Redux Form 文档中所述：https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/#props

<Field component={your custom component} defaultValue={}/>