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

Question

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

所以<Fields />是这样的：

<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 prop 的值如下：

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 function 并处理 state - https://reactjs.org/docs/forms.html#controlled-components

来自 redux-form 文档： https://redux-form.com/8.3.0/docs/api/field.md/#-code-onchange-event-newvalue-previousvalue-name-gt-void-code-optional -

Answer 2

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

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

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

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

Answer 3

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

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