2016-11-21 8 views
0

http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/のコード例をコードベースに実装しています。残念ながら、私はthis.contextの空のオブジェクトを取得しています。this.context react-reduxを使用しているときに空のオブジェクト

ここに私のコードがあります。ルータは、フォームとテキストの両方を含むログインコンポーネントにルーティングします。何かが明確になる必要がある場合は私に教えてください。私はReactにはとても新しいです。

ありがとうございます!

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

ところで、オフトピック、あなたはおそらく、あなたはそれを固定 – xiaofan2406

答えて

1

タイプミス:

static contextTypes: { 

==>

static contextTypes = { 
+0

反応し始めているとき 'context'を使用しないでください。私はそれらのすべてを得たと思った-_- –

関連する問題