redux-formはフィールドに値を入力できません

Question

redux-formを使用して入力フィールドに値を入力できません。私は

import {combineReducers} from 'redux'; 
import session from './sessionReducer'; 
import profile from './profileReducer'; 
import map from './mapReducer'; 
import { reducer as formReducer } from 'redux-form' 

const rootReducer = combineReducers({ 
    // short hand property names 
    session, 
    profile, 
    map, 
    form: formReducer 
}) 

export default rootReducer; 

、ここでは、状態が

を変更している

import { createStore, combineReducers, applyMiddleware } from 'redux' 
import createLogger from 'redux-logger' 
import thunk from 'redux-thunk' 
import { routerReducer, routerMiddleware, push } from 'react-router-redux' 
import reducers from '../reducers' 
import { browserHistory } from 'react-router'; 

const middleware = [ thunk ]; 
if (process.env.NODE_ENV !== 'production') { 
    middleware.push(createLogger()); 
} 

middleware.push(routerMiddleware(browserHistory)); 


// Add the reducer to your store on the `routing` key 
const store = createStore(
    combineReducers({ 
     reducers, 
     routing: routerReducer 
    }), 
    applyMiddleware(...middleware), 

) 

export default store; 

コンポーネント

import React, {PropTypes, Component} from 'react'; 
import Upload from './Upload'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 
import * as profileActions from '../../../actions/profileActions'; 
import EventsCalendar from '../../common/EventsCalendar'; 
import { Field, reduxForm } from 'redux-form' 
import ProfileForm from './ProfileForm'; 

import { 
    Form, 
    FormGroup, 
    FormControl, 
    ControlLabel, 
    Tabs, 
    Tab, 
    InputGroup, 
    Label, 
    HelpBlock, 
    Grid, 
    Row, 
    Button, 
    Col 

} from 'react-bootstrap'; 


class Profile extends Component { 

    static propTypes = { 
     profile: PropTypes.object.isRequired, 
    }; 

    constructor(props) { 
     super(props); 

     this.state = { 
      profile: { 
       username: '', 
       password: '', 
       email: '' 
      } 
     } 
     //this.onUpdate = this.onUpdate.bind(this) 
    } 

    handleSubmit = (values) => { 
     // Do something with the form values 
     console.log(values); 
    } 

    componentDidMount() { 
     this.props.actions.getProfile() 
    } 

    componentWillReceiveProps(nextProps) { 
     if (nextProps.profile !== this.props.profile) { 

     } 
    } 

    render() { 
     console.log(this.props.profile); 
     const {profile} = this.props.profile; 
     const { handleSubmit } = this.props; 

     return (
      <div className="row"> 
       <Col lg={10}> 
        <Tabs defaultActiveKey={1} id="uncontrolled-tab-example"> 
         <Tab eventKey={1} title="Vendor Data"> 
          <ProfileForm onSubmit={this.handleSubmit} data = {this.props.profile}/> 
         </Tab> 
         <Tab eventKey={3} title="Events Calendar"> 
          <EventsCalendar/> 
         </Tab> 
        </Tabs> 

       </Col> 

       <Col lg={2}> 
        <Upload/> 
       </Col> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state) { 

    return { 
     profile: state.default.profile, 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(profileActions, dispatch) 
    }; 
} 

Profile = reduxForm({ 
    form: 'profileForm' // a unique name for this form 
})(Profile); 

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

私はコンソールに表示入力てる店にある以下の減速を持っています

添付のフォームコンポーネント

import React, {Component} from 'react'; 
import {Field, reduxForm} from 'redux-form'; 
import FieldFormControl from '../../common/FieldFormControl'; 

import { 
    FormGroup, 
    FormControl, 
    ControlLabel, 
    Button 

} from 'react-bootstrap'; 

class ProfileForm extends Component { 
    render() { 
     const {handleSubmit, profile, pristine, reset, submitting} = this.props; 

     return (
      <form onSubmit={handleSubmit}> 
       <FormGroup controlId="signup-name"> 
        <Field type="text" name="firsname" placeholder="test" value component={FieldFormControl}>Vorname</Field> 
       </FormGroup> 
       <FormGroup controlId="signup-username"> 
        <Field type="text" name="lastname" placeholder={profile.username} value={profile.username} component={FieldFormControl}>Name</Field> 
       </FormGroup> 
       <FormGroup controlId="signup-email"> 
        <Field type="text" name="email" placeholder={profile.username} value={profile.username} component={FieldFormControl}>Vorname</Field> 
       </FormGroup> 

       <Button 
        bsStyle="primary" 
        type="submit" 
        //disabled={pristine || submitting} 
        block 
       >Speichern</Button> 
      </form> 
     ); 
    } 
} 

// Decorate the form component 
ProfileForm = reduxForm({ 
    form: 'profileForm' // a unique name for this form 
})(ProfileForm); 

export default ProfileForm; 

ブートストラップオーバーライドはReduxのフォーム

import React, { Component } from 'react'; 
import {FormGroup, FormControl, ControlLabel} from 'react-bootstrap'; 

export default class FieldFormControl extends Component { 

    render() { 

     const { placeholder, type, input, meta} = this.props; 

     return (
      <FormGroup controlId={input.name} validationState={meta.error ? 'error' : 'success'}> 
       <ControlLabel>{this.props.children}</ControlLabel> 
       <FormControl type={type} placeholder={placeholder} value={input.value} onChange={input.onChange} /> 
       <FormControl.Feedback /> 
      </FormGroup> 
     ); 
    } 
} 

Answer 1

はReduxの形式のハンドルが値を更新し、あなたがそれを渡すcomponentに渡す、あなたのFieldコンポーネントからvalue小道具を削除します。私はここでの考え方はの初期値の値を提供することを前提としていますが、これはそれを行う場所ではありません。

<Field type="text" name="email" placeholder={profile.username} component={FieldFormControl}>Vorname</Field> 

また、あなたがなどonFocus、onBlur、Reduxの形式で提供されているすべてを取得し、あなたのFieldFormControlであなたのFormControlにすべてinput小道具を渡すことができます。

<FormControl placeholder={placeholder} {...input} /> 

あなたはどちらか、値を持つフィールドを初期化しますがreduxForm、またはinitializeを使用して接続する場合には、フォームのマウント後に発生する必要がある場合initialValuesを使用したい場合。

最後に、combineReducersを2度使用して、ほとんどのレデューサーがあなたが意図していない方法でネストされるようにしています。これを簡略化するために、をreducers/index.jsファイルにインポートし、そこにcombineReducersに追加します。

const rootReducer = combineReducers({ 
    // short hand property names 
    session, 
    profile, 
    map, 
    form: formReducer, 
    routing: routerReducer, 
}); 

その後、お店で、あなただけのあなたは、あなたがなど、あなたの状態（セッション、プロファイル、フォーム、ルーティング、中にすべてのあなたの鍵を持っているだろうことを確認する必要があり

const store = createStore(
    reducers, 
    applyMiddleware(...middleware), 
); 

を持っています。）だけでなく、デフォルトとルーティング。

Answer 2

と互換性があるように私はそれがReduxの形式の問題ではないと思います。

代わりに、あなたのアプリケーションはあなたの入力を受け取り、あなたの入力を変更し、reducexにアクションをディスパッチします。これが根本的な原因です：あなたはchangeアクションを送出し、redux状態を更新させます（あなたのコードは減速機で変更されていないと思います）。その後、reduxがレンダーUIをフラッシュします。

修正するには、次のようにします。 通常、あなたの減量する人にonChangeアクションをディスパッチするとき、yuor還元状態を明示的に更新します。新しい状態がUIを自動的にフラッシュします。

あなたの減速は、このような類似している必要があります

function myReducer(state = initialState, action) { 
    switch (action.type) { 
    case MY_INPUT_VALUE_CHANGE: 
     return Object.assign({}, state, { 
     vornname: action.data 
     }) 
    default: 
     return state 
    } 
}