Can't type in text field using redux-form

Hunrik picture Hunrik · Oct 22, 2016 · Viewed 12.7k times · Source

I have a form in a modal using redux-form. I have several text fields, but you can not type in them. My suspicion is that the text field doesn't get the onChange event from the redux-form but I couldn't find any clue what am I doing good.

My code is:

import React from 'react'
import { Button, Modal, Form, Message } from 'semantic-ui-react'
import { Field, reduxForm } from 'redux-form'

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => {
  console.log(input)
  return (
  <Form.Field>
    <label>{label}</label>
    <input {...input} placeholder={label} type={type} />
    {touched && (error && <Message error>{error}</Message>)}
  </Form.Field>
)}

let AddNewModal = (props) => {
  const { handleSubmit, pristine, submitting, closeNewSite, isAddNewOpen, submit } = props

  return (
    <Modal dimmer='blurring' open={isAddNewOpen} onClose={closeNewSite}>
      <Modal.Header>Add a new site</Modal.Header>
      <Modal.Content>
        <Form onSubmit={handleSubmit}>
          <Form.Group widths='equal'>
            <Field name='domain' type='text' component={renderField} label='Domain' />
            <Field name='sitemap' type='text' component={renderField} label='Sitemap URL' />
          </Form.Group>
          /**
           * Other fields 
           * /
          <Button type='submit' disabled={pristine || submitting}>Save</Button>
        </Form>
      </Modal.Content>
      <Modal.Actions>
        <Button color='black' onClick={closeNewSite} content='Close' />
        <Button positive icon='save' labelPosition='right' onClick={submit} content='Save' disabled={pristine || submitting} />
      </Modal.Actions>
    </Modal>
  )
}

export default reduxForm({
  form: 'newsite'
})(AddNewModal)

Answer

Jin picture Jin · Oct 26, 2016

I added the reducer and still got the same issue. At last, I found it must add the attr 'form'.

const reducers = {
  routing,
  form: formReducer
};