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

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作为一个对象会自动将您的操作与dispatch一起包装，并将其作为prop传入。

const mapDispatchToProps = {
  signIn: SignInSubmit
}

然后在您的组件中。

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

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