我如何在 React 中使用 React/Redux 表单编辑时获取 post 值
How I can get post values in edit with React/Redux form in React
我正在用 React redux 制作简单的博客。作为包,我使用的是 redux 形式
我做了 post、get、delete 等事件,但我无法进行编辑,因为我无法在编辑中获取值 title 和 body。我试图用 componentwillMount 中的初始化来解决它,但是当我写 [=22 时,它出现错误 Cannot read 属性 'title' of undefined =] 在 ComponentWillMount
如何解决这个问题,如何在编辑表单中获取值
import React, { Component, PropTypes } from 'react';
import * as actions from '../../actions/index';
import { connect } from 'react-redux';
import {reduxForm} from 'redux-form';
import {initialize} from 'redux-form';
class EditPost extends Component {
componentWillMount(){
this.props.dispatch(initialize('edit', { title: this.props.edit.title }, ['title', 'body']));
this.props.EditPost(this.props.params.id);
}
handleFormSubmit(formProps){
this.props.addPost(formProps);
this.context.router.push('/posts');
}
render(){
const {handleSubmit,fields:{title,body}} = this.props;
if(!this.props.edit){
return <div>Loading...</div>;
}
return (
<div>
<div className="row">
<div className="col-md-12">
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<fieldset className="form-group">
<label>Title:</label>
<input {...title} className="form-control" />
{title.touched && title.error && <div className="text-danger">{title.error}</div>}
</fieldset>
<fieldset className="form-group">
<label>Body:</label>
<textarea {...body} className="form-control" ></textarea>
{body.touched && body.error && <div className="text-danger">{body.error}</div>}
</fieldset>
<button className="btn btn-success">Add</button>
</form>
</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
edit:state.posts.edit
}
}
export default reduxForm({
form:'edit',
fields:['title','body'],},mapStateToProps,actions)(EditPost);
我通过以下方式解决了问题。我可以使用 initialValues 获得 post 值:state.posts.edit
function mapStateToProps(state) {
return {
edit:state.posts.edit,
initialValues: state.posts.edit
}
}
我正在用 React redux 制作简单的博客。作为包,我使用的是 redux 形式 我做了 post、get、delete 等事件,但我无法进行编辑,因为我无法在编辑中获取值 title 和 body。我试图用 componentwillMount 中的初始化来解决它,但是当我写 [=22 时,它出现错误 Cannot read 属性 'title' of undefined =] 在 ComponentWillMount
如何解决这个问题,如何在编辑表单中获取值
import React, { Component, PropTypes } from 'react';
import * as actions from '../../actions/index';
import { connect } from 'react-redux';
import {reduxForm} from 'redux-form';
import {initialize} from 'redux-form';
class EditPost extends Component {
componentWillMount(){
this.props.dispatch(initialize('edit', { title: this.props.edit.title }, ['title', 'body']));
this.props.EditPost(this.props.params.id);
}
handleFormSubmit(formProps){
this.props.addPost(formProps);
this.context.router.push('/posts');
}
render(){
const {handleSubmit,fields:{title,body}} = this.props;
if(!this.props.edit){
return <div>Loading...</div>;
}
return (
<div>
<div className="row">
<div className="col-md-12">
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<fieldset className="form-group">
<label>Title:</label>
<input {...title} className="form-control" />
{title.touched && title.error && <div className="text-danger">{title.error}</div>}
</fieldset>
<fieldset className="form-group">
<label>Body:</label>
<textarea {...body} className="form-control" ></textarea>
{body.touched && body.error && <div className="text-danger">{body.error}</div>}
</fieldset>
<button className="btn btn-success">Add</button>
</form>
</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
edit:state.posts.edit
}
}
export default reduxForm({
form:'edit',
fields:['title','body'],},mapStateToProps,actions)(EditPost);
我通过以下方式解决了问题。我可以使用 initialValues 获得 post 值:state.posts.edit
function mapStateToProps(state) {
return {
edit:state.posts.edit,
initialValues: state.posts.edit
}
}