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; 

引导覆盖到与终极版形式

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

从Field部件拆下value道具，终极版形式处理更新的值，并将它传递给你传递的component。我假设这里的想法是提供初始值，但这不是做这件事的地方。

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

您也可以将所有input道具传递给你的FormControl在你FieldFormControl等你拿onFocus，onBlur等，全部由终极版形式提供。

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

如果你想和值初始化领域，既可以当您连接使用reduxForm，或initialize如果它需要的形式坐骑发生后，使用initialValues。

最后，您使用了两次combineReducers，这样您的大多数缩减器就会以您不想要的方式嵌套。为了简化这一点，我会在您的reducers/index.js文件中导入routerReducer，并将其添加到您的combineReducers那里。

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

然后，在你的店，你就得

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

然后，你应该看到，你将拥有所有你的钥匙在你的状态（会话，型材，形式，路由等）而不仅仅是默认和路由。

Answer 2

兼容的，我不认为它是终极版形式的问题。相反，我认为你的应用程序监听你的输入的变化，并将动作分派给redux。所以这是根本原因：你调用onChange动作，导致redux状态更新（我认为你的代码没有在reducer中改变它），之后，redux刷新渲染UI。

要修复它，您通常会在您的reducer中分派onChange操作时显式更新yuor redux状态。那么新状态会自动刷新你的UI。

例如您应该减速有这样类似：

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