具有 Redux-Form return 的值 null
Values with Redux-Form return null
我使用 Redux 和 React,在 CRUD 操作中,API、createPost
return 为 title
、categories
和 categories
的值content
使用 Redux-Form?
我可以帮忙,我不知道我的错误是什么?
动作文件index.js
export const CREATE_POST = 'CREATE_POST';
const URL = 'http://reduxblog.herokuapp.com/api';
const API_KEY = '1234557';
export function createPost(props) {
const request = axios
.post(`${URL}/posts?${API_KEY}`, props)
.then( res => { console.log(res) })
return {
type: CREATE_POST,
payload: request,
};
}
组件文件newPost.js
import React from 'react';
import { reduxForm } from 'redux-form';
import {crearPost} from '../acciones/index';
import {connect} from 'react-redux';
class NuevoPost extends React.Component {
onSubmit(values) {
this.props.crearPost(values)
}
render() {
const {fields: {
title, categories, content} ,
handleSubmit } = this.props;
return (
<form onSubmit={
handleSubmit(this.onSubmit.bind(this))}>
<h3>Crea un nuevo Post.</h3>
<div className='form-group'>
<label
>titulo</label>
<input
type='text'
className='form-control'
{...title}
/>
</div>
<div className='form-group'>
<label
>Categoria</label>
<input
type='text'
className='form-control'
{...categories}
/>
</div>
<div className='form-group'>
<label
>Contenido</label>
<textarea
type='text'
className='form-control'
{...content}
/>
</div>
<button
type="submit"
className="btn btn-info"
>Postear</button>
</form>
)
}
}
export default reduxForm({
form: 'newPost',
fields: ['title', 'categories', 'content']
})(connect(null, { crearPost })(NuevoPost));
这里需要使用redux-form
Field
import { reduxForm, Field } from 'redux-form';
<div className='form-group'>
<label>Categoria</label>
<Field
type='text'
className='form-control'
component={'input'}
/>
</div>
我使用 Redux 和 React,在 CRUD 操作中,API、createPost
return 为 title
、categories
和 categories
的值content
使用 Redux-Form?
我可以帮忙,我不知道我的错误是什么?
动作文件index.js
export const CREATE_POST = 'CREATE_POST';
const URL = 'http://reduxblog.herokuapp.com/api';
const API_KEY = '1234557';
export function createPost(props) {
const request = axios
.post(`${URL}/posts?${API_KEY}`, props)
.then( res => { console.log(res) })
return {
type: CREATE_POST,
payload: request,
};
}
组件文件newPost.js
import React from 'react';
import { reduxForm } from 'redux-form';
import {crearPost} from '../acciones/index';
import {connect} from 'react-redux';
class NuevoPost extends React.Component {
onSubmit(values) {
this.props.crearPost(values)
}
render() {
const {fields: {
title, categories, content} ,
handleSubmit } = this.props;
return (
<form onSubmit={
handleSubmit(this.onSubmit.bind(this))}>
<h3>Crea un nuevo Post.</h3>
<div className='form-group'>
<label
>titulo</label>
<input
type='text'
className='form-control'
{...title}
/>
</div>
<div className='form-group'>
<label
>Categoria</label>
<input
type='text'
className='form-control'
{...categories}
/>
</div>
<div className='form-group'>
<label
>Contenido</label>
<textarea
type='text'
className='form-control'
{...content}
/>
</div>
<button
type="submit"
className="btn btn-info"
>Postear</button>
</form>
)
}
}
export default reduxForm({
form: 'newPost',
fields: ['title', 'categories', 'content']
})(connect(null, { crearPost })(NuevoPost));
这里需要使用redux-form
Field
import { reduxForm, Field } from 'redux-form';
<div className='form-group'>
<label>Categoria</label>
<Field
type='text'
className='form-control'
component={'input'}
/>
</div>