終極版表字段

我有一個簡單的終極版形式和試圖按照這裏這裏給出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來說也是如此。

來源

2016-11-11 Aftab Naveed

爲了使redux窗體的工作，它的減速器需要包括在內，我忘了包含一個，這解決了我的問題。

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

    const allReducers = combineReducers({ 
     form: formReducer, 

    }); 

    export default allReducers;

來源

2016-11-11 19:38:14

終極版表字段

回答

相關問題