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={}/>