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
ところで、オフトピック、あなたはおそらく、あなたはそれを固定 – xiaofan2406