2016-11-21 2 views
0

Ich implementiere das Codebeispiel von http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/ in meine Codebasis. Leider bekomme ich dafür ein leeres Objekt.this.context leeres Objekt bei Verwendung von react-redux

Hier ist ein Teil meines Codes. Router führt zu einer Login-Komponente, die sowohl Form als auch Text enthält. Lass mich wissen, wenn etwas klarer sein muss, ich bin neu in React.

Danke!

export const MakeMainRoutes = (props) => { 
    return (
    <Router history={browserHistory}> 
     <Route path="/" component={Container} auth={auth}> 
     <IndexRedirect to="/home" /> 
     <Route path="home" component={Home} onEnter={requireAuth} /> 
     <Route path="login" component={Login} onEnter={parseAuthHash} /> 
     </Route> 
    </Router> 
) 
} 

export default MakeMainRoutes 

class Form extends React.Component { 
    static propTypes = { 
    children: PropTypes.node, 
    values: PropTypes.object, 
    update: PropTypes.func, 
    reset: PropTypes.func, 
    onSubmit: PropTypes.func 
    } 

    static childContextTypes = { 
    update: PropTypes.func, 
    reset: PropTypes.func, 
    submit: PropTypes.func, 
    values: PropTypes.object 
    } 

    getChildContext() { 
    return { 
     update: this.props.update, 
     reset: this.props.reset, 
     submit: this.submit, 
     values: this.props.values 
    }; 
    } 

    render() { 
    return (
     <form> 
     {this.props.children} 
     </form> 
    ) 
    } 
} 

export default Form 

import React, { PropTypes } from 'react'; 
import TextField from 'material-ui/TextField'; 
import * as validators from '../../libs/validators' 

class Text extends React.Component { 
    static propTypes = { 
    name: PropTypes.string.isRequired, 
    placeholder: PropTypes.string, 
    label: PropTypes.string 
    }; 

    static contextTypes: { 
    update: PropTypes.func.isRequired, 
    values: PropTypes.object.isRequired 
    }; 

    updateValue(value) { 
    this.context.update(this.props.name, value); 
    } 

    onChange(event) { 
    this.updateValue(event.target.value) 
    } 

    render() { 
    return (
     <div> 
     <TextField 
      hintText={this.props.placeholder} 
      floatingLabelText={this.props.label} 
      value={this.context.values[this.props.name]} 
      onChange={this.onChange}/> 
     </div> 
    ) 
    } 
} 

export default Text 
+0

btw, off topic, sollten Sie vielleicht vermeiden, mit 'context', wenn Sie gerade erst anfangen – xiaofan2406

Antwort

1

Typo:

static contextTypes: { 

==>

static contextTypes = { 
+0

reagieren, die es festgelegt. Ich dachte, ich hätte all diese –