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
BTW,題外話,你或許應該避免使用'context'當你剛開始作出反應 – xiaofan2406