嘿,我的反应项目有问题。实际上我想提交一个表单并将表单数据写入redux商店。问题是:当我提交表单时,会调用调度函数,但不会在商店中写入值...
这是我的表单组件:
import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import axios from 'axios';
import JsonTable from 'react-json-table';
//Redux functions
import { setUsername, setPassword, setId, setEmail, setFirstname, setLastname, setPosts } from '../actions/userActions';
@connect(({user}) => {
return {
user: user.user,
}
})
class RegistrationForm extends React.Component{
constructor(){
super();
}
handleFormSubmit(){
if(this.refs.password.value === this.refs.password2.value){
this.props.dispatch((dispatch) => {
dispatch(setUsername(this.refs.username.value));
dispatch(setPassword(this.refs.password.value));
dispatch(setEmail(this.refs.email.value));
dispatch(setFirstname(this.refs.firstname.value));
dispatch(setLastname(this.refs.lastname.value));
});
console.log(this.props.user);
//axios.put('/user', this.props.user);
}else{
console.log('Please repeat your password!');
}
}
componentWillMount(){
}
render(){
return(
<form onSubmit={this.handleFormSubmit.bind(this)}>
<h2>Registration</h2>
<label>
<input type="text" defaultValue="brotasco" size="200px" placeholder="Username" ref="username" required/>
</label><br/>
<label>
<input type="password" defaultValue="brotasco" size="200px" placeholder="Password" ref="password" required/>
</label><br/>
<label>
<input type="password" defaultValue="brotasco" size="200px" placeholder="Repeat Password" ref="password2" required/>
</label><br/>
<label>
<input type="text" size="200px" defaultValue="Mario" placeholder="Firstname" ref="firstname" required/>
</label><br/>
<label>
<input type="text" size="200px" defaultValue="Maeder" placeholder="Lastname" ref="lastname" required/>
</label><br/>
<label>
<input type="email" size="200px" defaultValue="brotasco@gmail.com" placeholder="Email" ref="email" required/>
</label><br/>
<input type="submit" value="Submit"/>
</form>
);
}
}
export default RegistrationForm;
这里是我的减速机:
export default function reducer(state={
user: {
userid: null,
username: null,
password: null,
email: null,
firstname: null,
lastname: null,
posts: null,
}
}, action){
switch(action.type) {
case 'SET_USERNAME':{
return {
...state,
user: {...state.user, username: action.payload}
}
}
case 'SET_PASSWORD':{
return{
...state,
user: {...state.user, password: action.payload}
}
}
case 'SET_ID':{
return{
...state,
user: {...state.user, userid: action.payload}
}
}
case 'SET_EMAIL':{
return{
...state,
user: {...state.user, email: action.payload}
}
}
case 'SET_FIRSTNAME':{
return{
...state,
user: {...state.user, firstname: action.payload}
}
}
case 'SET_LASTNAME':{
return{
...state,
user: {...state.user, lastname: action.payload}
}
}
case 'SET_POSTS':{
return{
...state,
user: {...state.user, posts: action.payload}
}
}
case 'SET_USER':{
return { ...state, user: action.payload}
}
}
return state
}
如果有人能帮助我会很棒:)。