我正在尝试在我的反应登录页面中使用简单的redux表单,但是当我在我的电子邮件和密码字段中尝试控制台输出值时,它们总是返回未定义。
这是我的 signin.js
import React, {Component} from 'react';
import { reduxForm } from 'redux-form';
class Signin extends Component {
handleFormSubmit({ email, password }){
console.log(email,password);
console.log(this.props.email);
}
render(){
const { fields: { email, password }, handleSubmit} = this.props;
return(
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} >
<fieldset className="form-group" >
<label>Email:</label>
<input {...email} className="form-control" component="input" />
{console.log(email)}
</fieldset>
<fieldset className="form-group" >
<label>password:</label>
<input {...password} className="form-control" />
</fieldset>
<button action="submit" className="btn btn-primary"> sign in</button>
</form>
);
}
}
export default reduxForm({
form: 'signin',
fields: ['email','password']
})(Signin);
这是我在
import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
const rootReducer = combineReducers({
form
});
export default rootReducer;
这是我的 package.json
{
"name": "redux-simple-starter",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"main": "index.js",
"repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "4.3.0",
"react-router": "^2.0.1",
"redux": "^3.0.4",
"redux-form": "^7.3.0"
}
}
我已经完成了所有的搜索,但仍然无法找到解决这个奇怪问题的方法。
我的输入值总是返回undefined。
答案 0 :(得分:0)
我还没有使用FieldSet,但你必须为redux-form定义每个字段的名称。我使用了具有name属性的Field组件。使用FieldSet,在我看来,您必须使用model属性来定义redux-form的标识符。