Question

我对Reac.js / Redux.js和javascript真的很陌生。我正在尝试通过实际学习来学习一种新语言。我正在尝试建立登录页面。但是由于某种原因，我无法将内部状态传递给mapDispatchToProps。我可以看到组件内部的值，但无法在类之外获取它们。我该如何将组件的状态传递给mapDispatchToProps。谢谢你提前身份证！！！

import React, {Component} from 'react';
import {bindActionCreator} from 'redux';
import {connect} from 'react-redux';
import {SignInSubmit} from '../../actions/SignIn_Action';

const mapStateToProps = state =>{
  return{
    userEmail: state.userInfo.userEmail,
    userPassword: state.userInfo.userPassword,
    user: state.user,
    password: state.password
  }
}

const mapDispatchToProps = (dispatch) => {
  //console.log(this.state.loginPassword);
  //console.log(this.props.user);
  return{
    onSubmit: (event) => dispatch(SignInSubmit(this.user, this.password))
  }
}



class SignIn extends React.Component {

  constructor(props){
    super();
    this.state = {
      loginPassword: '',
      loginUser: ''
    }
    // this.onPasswordChange = this.onPasswordChange.bind(this);
    // this.onEmailChange = this.onEmailChange.bind(this);
    // //this.onSubmit = this.onSubmit.bind(this);
  }

  onPasswordChange = (event) => {
    this.setState({loginPassword: event.target.value})
    console.log(this.state.loginPassword);
  }

  onEmailChange = (event) => {
    this.setState({loginUser: event.target.value})
     console.log(this.state.loginUser);
  }
	render(){
	  return (
	  	<main class="pa4 black-80">
  			<form class="measure center">
    			<fieldset id="sign_up" class="ba b--transparent ph0 mh0">
      				<legend class="f4 fw6 ph0 mh0">Sign In</legend>
      				<div class="mt3">
        				<label class="db fw6 lh-copy f6" for="email-address">Email</label>
        				<input 
                class="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" 
                type="email" 
                name="email-address"  
                id="email-address"
                onChange = {this.onEmailChange}/>
      				</div>
     				<div class="mv3">
       					<label class="db fw6 lh-copy f6" for="password">Password</label>
        				<input 
                class="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" 
                type="password" 
                name="password"  
                id="password"
                onChange = {this.onPasswordChange}/>
      				</div>
    			</fieldset>
    			<div class="">
      				<input 
              class="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" 
              type="submit" 
              value="Sign in"
              onChange= {this.onSubmit}/>
    			</div>
  			</form>
		</main>
		);
	};
}

export default connect(mapStateToProps, mapDispatchToProps)(SignIn);

Answer 1

mapDispatchToProps作为对象会自动将您的操作包装为分派并将其作为道具传递。

const mapDispatchToProps = {
  signIn: SignInSubmit
}

然后在您的组件中。

onSubmit: () => {
  const { loginUser, loginPassword } = this.state;
  this.props.signIn(loginUser, loginPassword);
}

<button onClick={this.onSubmit}>Sign In</button>

将组件的状态传递给mapDispatchToProps React / Redux

1 个答案: