Redux Form handleSubmit无法获取表单值问题求助

Hey there, let's sort out why your form submission is logging undefined for email and password. The core issue here is that you're using the deprecated fields prop from older Redux-Form versions—this approach isn't supported in recent releases. Here's a step-by-step fix:

1. Update Imports to Use the Field Component #

First, add Field to your imports from redux-form. This component is the standard way to connect inputs to Redux-Form's state now, replacing the old fields prop pattern.

2. Rewrite Form Inputs with Field #

Swap out your existing Input elements for Field components. Each Field needs a name matching your form fields (email and password), and you'll pass Semantic UI's Input as the component prop to retain styling.

3. Clean Up Props Destructuring #

You no longer need to destructure fields from this.props—only handleSubmit is required to handle form submission.

Here's the corrected signin.js code:

import React, { Component } from 'react'
import { reduxForm, Field } from 'redux-form' // Add Field import
import { Checkbox, Form, FormField, Button, Grid, GridColumn, Input } from 'semantic-ui-react'

class SignIn extends Component {
  onFormSubmitHandler(formValues) {
    const { email, password } = formValues
    console.log('Values', email, password)
  }

  render() {
    const { handleSubmit } = this.props // Remove fields from destructuring
    return (
      <Grid centered columns={2}>
        <GridColumn>
          <Form onSubmit={handleSubmit(this.onFormSubmitHandler.bind(this))}>
            <FormField>
              <label>Email:</label>
              <Field 
                name="email" 
                component={Input} 
                placeholder='Email' 
              />
            </FormField>
            <FormField>
              <label>Password:</label>
              <Field 
                name="password" 
                component={Input} 
                placeholder='Password' 
                type="password" // Add password type for better UX
              />
            </FormField>
            <FormField>
              <Checkbox label='I agree to the Terms and Conditions' />
            </FormField>
            <Button type='submit'>Sign In</Button> {/* Fix button attribute to type="submit" */}
          </Form>
        </GridColumn>
      </Grid>
    )
  }
}

export default reduxForm({
  form: 'signin',
  fields: ['email', 'password']
})(SignIn)

Quick Extra Fixes: #

• Added type="password" to the password field to hide typed characters (standard for password inputs).
• Changed the Button's action='submit' to type='submit'—this is the correct HTML attribute for triggering form submission.
• Your root reducer setup is already correct (you're properly combining the Redux-Form reducer as form), so no changes needed there.

After these adjustments, submitting the form should log the actual email and password values you enter.

内容的提问来源于stack exchange，提问作者Adam Sackfield