redux-form How to have initial value in the input field-CodePudding

I use redux-form for my form, following the example: https://redux-form.com/8.3.0/docs/api/fields.md/

So the <Fields /> is like so:

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

the fields component that i render is this

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>
)

So far so good, the form displays the 2 input fields and i can add values into them.

But how do i pass default values into the input's ?

When i add the value property into the input, i cant edit the input afterwards.

For example, i add the value prop with a value like so:

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>
)

In that way, the inputs have always the same init value. Any help on how to have default value and also be able to edit it, thank you.

CodePudding user response：

When you provide the value prop you will need to provide onChange function as well and handle the state - https://reactjs.org/docs/forms.html#controlled-components

and from redux-form docs: https://redux-form.com/8.3.0/docs/api/field.md/#-code-onchange-event-newvalue-previousvalue-name-gt-void-code-optional-

CodePudding user response：

You need a state variable to hold the input value.

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

In the input tag, use the previously declared state variable as value & in onChange of input, set the input value to the target value.

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

CodePudding user response：

You can use prop defaultValue, as mentioned in Redux Form documentation :https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/#props

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