无法使用 redux-form 在文本字段中输入 [英] Can't type in text field using redux-form

问题描述

我有一个使用 redux-form 的模态表单.我有几个文本字段，但你不能输入它们.我怀疑文本字段没有从 redux-form 中获取 onChange 事件，但我找不到任何线索我在做什么.

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.

我的代码是:

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)

推荐答案

我添加了减速器，但仍然遇到同样的问题.最后，我发现它必须添加 attr 'form'.

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
};

这篇关于无法使用 redux-form 在文本字段中输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！