Question

尝试使用Redux Form制作表单。

这是我的组成部分

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)

问题在于，提交后，我总是会遇到必要的错误，这意味着这些值永远不会改变。 onChange也没有被调用。

这里是validate.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

这是onSubmit.js

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

这里是组成部分

Form.js

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)

TextField

import React from 'react'
import PropTypes from 'prop-types'

import TextField from '@material-ui/core/TextField'

const TextFieldForReduxForm = props => {
  const {
    meta: {
      touched,
      error
    },
    label
  } = props

  const isErrored = error && touched

  const displayErrorOrLabel = () => {
    if (isErrored) return error
    return label
  }

  return <TextField
    {...props}
    error={isErrored}
    label={displayErrorOrLabel()}
  />
}

export default TextFieldForReduxForm

TextFieldForReduxForm.propTypes = {
  meta: PropTypes.object,
  label: PropTypes.string
}

Answer 1

来自redux-form的Field组件的值，事件处理程序和其他输入属性被传递到props.input内部的form组件

在TextFieldForReduxForm组件内传播props.input而不是props。

Redux Form不会更改值

1 个答案: