在尝试使用Redux在React中验证我的表单时,我一直收到此Unknown TypeError错误,但我无法找到解决方案。错误来自EventForm:
<div className={`form-group ${title.touched && title.invalid ? 'has-error' : ''}`}>
并出现在bundle.js。
中好像&#34;字段&#34;由于某种原因没有定义。我无法弄清楚原因。
这是我的表单组件:
// src/components/Form.js
import React, { Component, PropTypes } from 'react'
import style from './style.css'
import { ControlLabel, FormControl, PageHeader, Grid, Checkbox, Radio, FormGroup, Button, HelpBlock, InputGroup } from 'react-bootstrap'
import DatePicker from 'react-bootstrap-date-picker';
import FieldGroup from './FieldGroup'
import { reduxForm } from 'redux-form';
function validate(values) {
const errors = {};
if (!values.title || values.title.trim() === '') {
errors.title = 'Enter a Title';
}
if (!values.categories || values.categories.trim() === '') {
errors.categories = 'Enter categories';
}
if (!values.content || values.content.trim() === '') {
errors.content = 'Enter some content';
}
return errors;
}
class EventForm extends Component {
getInitalState() {
var value = new Date().toISOString();
return {
value: value
}
}
handleChange({value}) {
this.setState({
value: value
});
}
dateGroup() {
return (
<FormGroup>
<ControlLabel>Label</ControlLabel>
<DatePicker value={this.state.value} onChange={this.handleChange} />
</FormGroup>
);
}
render() {
const { fields: { title, categories, content }, handleSubmit, submitting } = this.props;
return (
<div className="container">
<form onSubmit={() => this.handleSubmit}>
<div className={`form-group ${title.touched && title.invalid ? 'has-error' : ''}`}>
<label className="control-label">Title*</label>
<input type="text" className="form-control" {...title} />
<div className="help-block">
{title.touched ? title.error : ''}
</div>
<div className="help-block">
</div>
</div>
<div className={`form-group ${categories.touched && categories.invalid ? 'has-error' : ''}`}>
<label className="control-label">Categories*</label>
<input type="text" className="form-control" {...categories} />
<div className="help-block">
{categories.touched ? categories.error : ''}
</div>
</div>
<div className={`form-group ${content.touched && content.invalid ? 'has-error' : ''}`}>
<label className="control-label">Content*</label>
<textarea className="form-control" {...content} />
<div className="help-block">
{content.touched ? content.error : ''}
</div>
</div>
<button type="submit" className="btn btn-primary" >Submit</button>
<Link to="/" className="btn btn-error">Cancel</Link>
</form>
</div>
);
}
}
export default reduxForm({
form: 'PostsEventForm',
fields: ['title', 'categories', 'content'],
validate
},)(EventForm);
这是我的减速机:
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
//combineReducers adds all reducers into a single JSON of reducers
const rootReducer = combineReducers({
form: formReducer // ← redux-form
});
export default rootReducer;
我的index.js:
import { Router, Route, browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import { Provider } from 'react-redux'
import ReactDOM from 'react-dom'
import React from 'react'
import RegisteredEventOverview from './components/RegisteredEventOverview'
import bootstrap from 'bootstrap/dist/css/bootstrap.css'
import EventForm from './components/EventForm/EventForm'
import configureStore from './store/configureStore.js';
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<EventForm/>
</Provider>
,document.getElementById('root')
);
这是我的package.json:
{
"name": "take-me-out",
"version": "1.0.0",
"private": true,
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 3002",
"build": "NODE_ENV=production webpack --progress --colors"
},
"license": "MIT",
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.3",
"babel-plugin-transform-runtime": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.5.0",
"classnames": "^2.2.3",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"jquery": "^3.1.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"postcss-loader": "^0.8.1",
"react": "^15.3.2",
"react-bootstrap": "^0.30.3",
"react-dom": "^15.3.2",
"react-hot-loader": "^3.0.0-beta.5",
"react-redux": "^4.4.0",
"react-revalidator": "^0.1.1",
"react-router": "^2.0.0",
"react-router-redux": "^4.0.0",
"redux": "^3.3.1",
"redux-actions": "^0.9.1",
"redux-form": "^6.1.0",
"redux-revalidate": "^0.1.0",
"revalidate": "^0.4.1",
"rucksack-css": "^0.8.5",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.7.1"
},
"peerDependencies": {
"revalidate": "<1.0.0",
"react": "^0.14.0 || ^15.0.0"
},
"dependencies": {
"bootstrap": "^3.3.7",
"redux-promise": "^0.5.3"
}
}
答案 0 :(得分:2)
您无法直接使用
<input type="text" className="form-control" {...title} />
您必须导入redux-form字段
import { Field, reduxForm } from 'redux-form'
并在表单中使用它们,作为组件支持您的输入:
<Field name="title" component="input" type="text" placeholder="title"/>
通过这种方式,Redux-Form将一些道具传递到Field(&#39; 触摸&#39;在您的情况下,用于了解用户是否已触及&#39; #39;输入)
您可以在官方Redux-Form page
找到一个很好的例子