Question

我有一个简单的Redux表单并尝试按照此处给出的示例https://redux-form.com/6.2.0/docs/GettingStarted.md/这里是我的代码

用户-form.js

import React from 'react';
import {Field, reduxForm} from 'redux-form';

class UserForm extends React.Component {

    /**
     * User Form goes here...
     */
    render() {
        const { handleSubmit } = this.props;

        return (
            <form role="form" onSubmit={handleSubmit}>
                <div className="box-body">
                    <div className="form-group">
                        <label htmlFor="name">Full Name</label>
                        <Field
                            name="name"
                            component="input"
                            type="text"
                            className="form-control"
                            placeholder="Enter full name..."/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="email">Email address</label>
                        <Field
                            name="email"
                            type="email"
                            component="input"
                            className="form-control"
                            placeholder="Enter email"/>
                    </div>
                    <div className="form-group">
                        <label htmlFor="password">Password</label>
                        <Field
                            name="password"
                            type="password"
                            component="input"
                            className="form-control"
                            placeholder="Password"/>
                    </div>

                </div>
                <div className="box-footer">
                    {/* <button type="submit" className="btn btn-primary">Save</button> */}
                    <button type="submit" className="btn btn-primary" value="Save">Save</button>
                </div>
            </form>
        );
    }
}

UserForm = reduxForm({
    form: 'user'
})(UserForm);

export default UserForm;

上面的表单由UserPage容器呈现的用户page.js

import React from 'react';

import Page from '../../page';
import UserForm from '../components/user-form';
import UserList from '../components/user-list';

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import UserAction from '../actions';

import {showLoading, hideLoading} from 'react-redux-loading-bar';


/**
 * We might want to create an Abstract Form component to
 * include all common form features.
 */

class UserPage extends Page {




    handleUserSubmit(values) {
        console.log(values);
    }

    /**
     * Content is loaded into page
     */
    content() {
        return (
            <div className="row">
                {/* left column */}
                <div className="col-md-6">
                    {/* general form elements */}
                    <div className="box box-primary">
                        <div className="box-header with-border">
                            <h3 className="box-title">New User</h3>
                        </div>
                        {/* /.box-header */}
                        <UserForm onSubmit={this.handleUserSubmit}/>
                    </div>
                    {/* /.box */}

                </div>
                {/*/.col (left) */}
                {/* right column */}
                <div className="col-md-6">
                    {/* UserList made of <User /> */}

                    {this.userList()}
                    {/* /.box */}
                </div>
                {/*/.col (right) */}
            </div>
        );
    }


}

const mapStateToProps = (state) => ({ //this gets state from reducer and maps to props

            users: state.userList.users,
            fetched: state.userList.fetched,
            error: state.userList.error

});


const mapDispatchToProps = (dispatch) => ({
   actions: bindActionCreators({
       dispatchShowLoading: showLoading,
       dispatchHideLoading: hideLoading,
       dispatchUserList: UserAction.userList
   }, dispatch)
});


export default connect(mapStateToProps, mapDispatchToProps)(UserPage);

我的表单成功呈现，我可以看到Redux Dev工具窗口中发送的所有操作，但是当我尝试在字段中输入文本时，它不会做任何事情，但是像我说的那样调度操作。

很抱歉，如果这听起来是一个非常基本的问题。我对React和Redux相对较新，对Javascript也是如此。

Answer 1

为了使redux表单工作，需要包含reducer，我忘了包含一个，这解决了我的问题。

import { reducer as formReducer } from 'redux-form';

    const allReducers = combineReducers({
        form: formReducer,

    });

    export default allReducers;

Redux表单简单字段

1 个答案: