提交表单后我无法console.log（）用户详细信息？

时间：2018-05-27 11:40:24

标签： javascript reactjs react-redux

我使用react-redux制作了银行详细信息提交表单。我无法console.log(this.props.firstname)等。在表单组件中使用showUser()方法。点击提交按钮后，showUser()就会被解雇。我将表单的输入值存储在redux store中，并在存储后我想要console.log()数据。

表单组件：

    import React, { Component } from 'react';
import { connect } from 'react-redux';
import actions from '../actions/actions';

import './form.css';

class Form extends Component {
    constructor(props) {
    super(props)
    this.setFirstName = this.setFirstName.bind(this);
    this.setLastName = this.setLastName.bind(this);
    this.setEmailId = this.setEmailId.bind(this);
    this.setIban = this.setIban.bind(this);
     this.setBankName = this.setBankName.bind(this);


    }

    setFirstName(event) {
    this.props.dispatch(actions.setFirstName(event.target.value));
    }

    setLastName(event) {
    this.props.dispatch(actions.setLastName(event.target.value));
    }

    setEmailId(event) {
    this.props.dispatch(actions.setEmailId(event.target.value));
    }

    setIban(event) {
    this.props.dispatch(actions.setIban(event.target.value));
    }

    setBankName(event) {
    this.props.dispatch(actions.setBankName(event.target.value));
    }

    showUser(){
        console.log(this.props.firstname);
        console.log(this.props.lastname);
        console.log(this.props.emailid);
    }


  render(){
    return(
      <div>
          <div id="center">
              <form>
                    <div className="form-group">
                         <label for="firstname">First Name:</label>
                         <input type="firstname" className="form-control" id="firstname" onChange={this.setFirstName}/>
                    </div>

                    <div className="form-group">
                         <label for="lastname">Last Name:</label>
                         <input type="lastname" className="form-control" id="lastname" onChange={this.setLastName}/>
                    </div>

                    <div className="form-group">
                        <label for="email">Email address:</label>
                        <input type="email" className="form-control" id="email" onChange={this.setEmailId}/>
                    </div>

                    <div className="form-group">
                         <label for="bankacc">IBAN:</label>
                         <div id="deletebank" className="items">
                         <input type="bankacc" className="form-control" id="bankacc" onChange={this.setIban}/>
                         <button type="button" class="btn btn-default btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> 
                         </button>
                         </div>
                    </div>

                    <div className="form-group">
                         <label for="bankname">Bank Name:</label>
                         <input type="bankname" className="form-control" id="bankname" onChange={this.setBankName}/>
                    </div>

                    <div className="form-group">
                         <button type="button" className="btn addbank">+ Add bank account</button>
                    </div>

                    <div className="form-group">
                         <button type="button" class="btn btn-success" onclick={this.showUser()}>Submit</button>
                    </div>


              </form>
          </div>
      </div>

    )}


}

const mapStateToProps = store => {
  return {
    firstname: store.user.firstname,
    lastname: store.user.lastname,
    emailid: store.user.emailid,
    iban: store.user.bankaccounts.iban,
    bankname: store.user.bankaccounts.bankname
  }
}

export default connect(mapStateToProps)(Form);

减速：

const userReducer = (state = {
  user:{
    firstname:'',
    lastname:'',
    emailid:'',
    bankaccounts:{
      iban:'',
      bankname:''
    }
  }
  }, action) => {

  switch (action.type) {
    case 'SET_FIRSTNAME':{
      return {
        ...state,
        user:{...state.user, firstname: action.payload}
      }
    }

    case 'SET_LASTNAME':{
      return {
        ...state,
        user:{...state.user, lastname: action.payload}
      }
    }

    case 'SET_EMAILID':{
      return {
        ...state,
        user:{...state.user, emailid: action.payload}
      }
    }

    case 'SET_IBAN':{
      return {
        ...state,
        user:{...state.user, iban: action.payload}
      }
    }

    case 'SET_BANKNAME':{
      return {
        ...state,
        user:{...state.user, bankname: action.payload}
      }
    }
  }

}

export default userReducer;

操作：

export const SET_FIRSTNAME = 'SET_FIRSTNAME';
export const SET_LASTNAME = 'SET_LASTNAME';
export const SET_EMAILID = 'SET_EMAILID';
export const SET_IBAN = 'SET_IBAN';
export const SET_BANKNAME = 'SET_BANKNAME';


export function setFirstName(firstname){
    return {
        type:SET_FIRSTNAME,
        payLoad:firstname
    }
}

export function setLastName(lastname){
    return {
        type:SET_LASTNAME,
        payLoad:lastname
    }
}

export function setEmailId(emailid){
    return {
        type:SET_EMAILID,
        payLoad:emailid
    }
}

export function setIban(iban){
    return {
        type:SET_IBAN,
        payLoad:iban
    }
}

export function setBankName(bankname){
    return {
        type:SET_BANKNAME,
        payLoad:bankname
    }
}

商店：

import { createStore } from 'redux';

import userReducer from './reducers/reducers';


const store = createStore(userReducer);

store.subscribe(() => {
    console.log('Store changed', store.getState());
})

export default store;

我在下面添加了表单检查的屏幕截图：

enter image description here

3 个答案:

答案 0 :(得分：1)

如果您有错误import {actions} from '../actions/actions';，请将导入语句更改为

{{1}}

答案 1 :(得分：0)

在你的用户reducer中，你有用户对象，所以你必须这样做：

console.log(this.props.user.firstname)

而不是

console.log(this.props.firstname)

答案 2 :(得分：0)

表单组件应更改如下：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as action from '../actions/actions';


import './form.css';

class Form extends Component {
    constructor(props) {
    super(props);
    this.setFirstName = this.setFirstName.bind(this);
    this.setLastName = this.setLastName.bind(this);
    this.setEmailId = this.setEmailId.bind(this);
    this.setIban = this.setIban.bind(this);
     this.setBankName = this.setBankName.bind(this);
     this.showUser = this.showUser.bind(this);

     console.log(this.props);

    }

    setFirstName(event) {
    this.props.dispatch(action.setFirstName(event.target.value));
    }

    setLastName(event) {
    this.props.dispatch(action.setLastName(event.target.value));
    }

    setEmailId(event) {
    this.props.dispatch(action.setEmailId(event.target.value));
    }

    setIban(event) {
    this.props.dispatch(action.setIban(event.target.value));
    }

    setBankName(event) {
    this.props.dispatch(action.setBankName(event.target.value));
    }

    showUser(){
        console.log(this.props);
    }


  render(){
    return(
      <div>
          <div id="center">
              <form>
                    <div className="form-group">
                         <label htmlFor="firstname">First Name:</label>
                         <input type="firstname" className="form-control" id="firstname" onChange={this.setFirstName}/>
                    </div>

                    <div className="form-group">
                         <label htmlFor="lastname">Last Name:</label>
                         <input type="lastname" className="form-control" id="lastname" onChange={this.setLastName}/>
                    </div>

                    <div className="form-group">
                        <label htmlFor="email">Email address:</label>
                        <input type="email" className="form-control" id="email" onChange={this.setEmailId}/>
                    </div>

                    <div className="form-group">
                         <label htmlFor="bankacc">IBAN:</label>
                         <div id="deletebank" className="items">
                         <input type="bankacc" className="form-control" id="bankacc" onChange={this.setIban}/>
                         <button type="button" className="btn btn-default btn-sm">
                            <span className="glyphicon glyphicon-trash"></span> 
                         </button>
                         </div>
                    </div>

                    <div className="form-group">
                         <label htmlFor="bankname">Bank Name:</label>
                         <input type="bankname" className="form-control" id="bankname" onChange={this.setBankName}/>
                    </div>

                    <div className="form-group">
                         <button type="button" className="btn addbank">+ Add bank account</button>
                    </div>

                    <div className="form-group">
                         <button type="button" className="btn btn-success" onClick={this.showUser}>Submit</button>
                    </div>


              </form>
          </div>
      </div>

    )}


}

const mapStateToProps = store => {
  return {
    firstname: store.user.firstname,
    lastname: store.user.lastname,
    emailid: store.user.emailid,
    iban: store.user.iban,
    bankname: store.user.bankname
  }
}

export default connect(mapStateToProps)(Form);
相关问题
最新问题