javascript - 如何在按钮中触发 mapDispatchToProps 操作？

Question

我对 mapDispatchToProps 有疑问。如何使用按钮中的 onClick 从 mapDispatchToProps “触发”操作？ - 登录表单.js。我知道，我还有很多东西要学 :D

class LoginForm extends Component{
render()
{
const {changeStatusLogin} = this;
return(
    <StyledContainer>
     <StyledTitle>Logowanie</StyledTitle>
                   <StyledForm className="form" role="form" method="post" action="login" id="login-nav">
                      <div className="form-group">
                         <label className="sr-only" htmlFor="exampleInputUsername2">Login</label>
                         <input className="form-control" id="exampleInputEmail2" style={{textAlign: "center"}} placeholder="Login" required/>
                      </div>
                      <div className="form-group">
                         <label className="sr-only" htmlFor="exampleInputPassword2">Haslo</label>
                         <input type="password" className="form-control" id="exampleInputPassword2" style={{textAlign: "center"}} placeholder="Password" required/>
                      </div>
                         <Button type="submit"  className="btn btn-success" onClick={changeStatusLogin}>Zaloguj</Button>                                          
                   </StyledForm>
    </StyledContainer>
  )
 }
}
  const mapStateToProps = (state) => {return { 
  showLogin: state.showLogin}}

  const mapDispatchToProps = (dispatch) => {return {
  onChangeStatus: () => dispatch(loginAction.setTrue())}}

  export default connect(mapStateToProps,mapDispatchToProps(LoginForm);

Answer 1

当您使用 connect 时，“已连接”组件将接收调度函数作为 props。

您可以使用您在 mapDispatchToProps 中给它们的相同名称访问 Prop 。

const mapDispatchToProps = (dispatch) => {
  return {
    onChangeStatus: () => dispatch(loginAction.setTrue())
  }
}

在你的组件中，像这样使用它:

onChange(e){
  e.preventDefault()
  //no need to pass anything to this function
  this.props.onChangeStatus()
}

render(){
  return <button onClick={this.onChange.bind(this)} />
}