Javascript Redux表单没有'；不能改变值

正在尝试使用Redux表单生成表单

这是我的组件

import React, { Component } from 'react'

import { Field, reduxForm } from 'redux-form'

import Form from './components/Form'

import TextFieldForReduxForm from './components/TextFieldForReduxForm'

import validate from './validate'

import { signUpCallbacks } from './onSubmit'

class SignUp extends Component {
  render () {
    return (
      <Form
        {...this.props}
        formTitle='SIGN UP'
        buttonTitle='SIGN UP'
        linkTo='/sign/in'
        linkTitle='Sign In'
      >
        <Field
          component={TextFieldForReduxForm}
          name='email'
          label='Email'
          margin='normal'
        />,
        <Field
          component={TextFieldForReduxForm}
          name='password'
          label='Password'
          type='password'
          margin='normal'
        />
      </Form>
    )
  }
}

export default reduxForm({
  form: 'signup',
  validate,
  onSubmit: signUpCallbacks.onSubmit,
  onChange: values => console.log('onChange', values)
})(SignUp)

下面是

onSubmit.js

export const isValidEmail = email => /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)

const validate = values => {
  console.log('validate', values)
  const errors = {}
  if (!values.email) {
    errors.email = 'Required'
  } else if (!isValidEmail(values.email)) {
    errors.email = 'Invalid email address'
  }

  if (!values.password) {
    errors.password = 'Required'
  }

  return errors
}

export default validate

export const signUpCallbacks = {
  onSubmit (values, dispatch, props) {
    console.log(values)
  }
}

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { withStyles } from '@material-ui/core/styles'
import Grid from '@material-ui/core/Grid'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'

import { Link } from 'react-router'

const styles = {
  button: {
    margin: '15px 0px'
  }
}

class Form extends Component {
  static propTypes = {
    classes: PropTypes.object,
    formTitle: PropTypes.string,
    buttonTitle: PropTypes.string,
    linkTo: PropTypes.string,
    linkTitle: PropTypes.string,
    children: PropTypes.array,
    handleSubmit: PropTypes.func,
    submitting: PropTypes.bool
  }

  render () {
    const {
      classes,
      formTitle,
      buttonTitle,
      linkTo,
      linkTitle,
      children,
      submitting,
      handleSubmit
    } = this.props

    return (
      <form onSubmit={handleSubmit}>
        <Grid
          container
          spacing={16}
          alignItems='center'
          direction='column'
          justify='center'
        >
          <Typography variant='headline' gutterBottom>
            {formTitle}
          </Typography>
          {children}
          <Button
            disabled={submitting}
            type='submit'
            variant='contained'
            color='primary'
            className={classes.button}
          >
            {buttonTitle}
          </Button>
          <Link to={linkTo}>{linkTitle}</Link>
        </Grid>
      </form>
    )
  }
}

export default withStyles(styles)(Form)

下面是组件

Form.js

export const isValidEmail = email => /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)

const validate = values => {
  console.log('validate', values)
  const errors = {}
  if (!values.email) {
    errors.email = 'Required'
  } else if (!isValidEmail(values.email)) {
    errors.email = 'Invalid email address'
  }

  if (!values.password) {
    errors.password = 'Required'
  }

  return errors
}

export default validate

export const signUpCallbacks = {
  onSubmit (values, dispatch, props) {
    console.log(values)
  }
}

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { withStyles } from '@material-ui/core/styles'
import Grid from '@material-ui/core/Grid'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'

import { Link } from 'react-router'

const styles = {
  button: {
    margin: '15px 0px'
  }
}

class Form extends Component {
  static propTypes = {
    classes: PropTypes.object,
    formTitle: PropTypes.string,
    buttonTitle: PropTypes.string,
    linkTo: PropTypes.string,
    linkTitle: PropTypes.string,
    children: PropTypes.array,
    handleSubmit: PropTypes.func,
    submitting: PropTypes.bool
  }

  render () {
    const {
      classes,
      formTitle,
      buttonTitle,
      linkTo,
      linkTitle,
      children,
      submitting,
      handleSubmit
    } = this.props

    return (
      <form onSubmit={handleSubmit}>
        <Grid
          container
          spacing={16}
          alignItems='center'
          direction='column'
          justify='center'
        >
          <Typography variant='headline' gutterBottom>
            {formTitle}
          </Typography>
          {children}
          <Button
            disabled={submitting}
            type='submit'
            variant='contained'
            color='primary'
            className={classes.button}
          >
            {buttonTitle}
          </Button>
          <Link to={linkTo}>{linkTitle}</Link>
        </Grid>
      </form>
    )
  }
}

export default withStyles(styles)(Form)

---

redux表单的字段组件中的值、事件处理程序和其他输入道具被传递到

props.input中的表单组件

扩展
道具。在TextFieldForReduxForm组件中输入
而不是
道具
。
扩展
道具
仍然有用，因为一些道具似乎没有通过
道具传递。输入
，例如
键入class='password'
。只需确保不要使用redux表单内部传递的道具。例如，若您使用FormSection，它的名称将作为prop
name
而不是您在字段中传递的名称。