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

我对mapDispatchToProps有问题。如何使用onClick-in按钮从mapDispatchToProps“触发”操作LoginForm.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);

类LoginForm扩展组件{
render（）
{
const{changeStatusLogin}=这个；
返回(
洛格瓦尼
登录
哈斯洛
扎洛古伊
)
}
}
常量mapStateToProps=（状态）=>{return{
showLogin:state.showLogin}
const mapDispatchToProps=（调度）=>{return{
onChangeStatus:（）=>dispatch（loginAction.setTrue（））}
导出默认连接（MapStateTrops、mapDispatchToProps（LoginForm）；

当您使用

connect

时，“connected”组件将作为道具接收分派功能

您可以使用在

mapDispatchToProps

中提供的相同名称访问这些道具

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)} />
}

onChange（e）{
e、 预防默认值（）
//无需向此函数传递任何内容
this.props.onChangeStatus（）
}
render（）{
返回
}

const{changeStatusLogin}=this.props；

。另一件事-

changeStatusLogin

函数未在任何位置声明，您应该将其包含在

mapDispatchToProps

函数中。请确保接受答案！感谢您的解释，但现在当我单击按钮时，我出现以下错误：

类型错误：this.props.onChangeStatus不是函数。。。

@DawidWójcik我刚刚意识到您没有向分派函数传递任何内容。请将代码更改为：

this.props.onChangeStatus（）

在

onChange（）中

函数。然后，似乎道具没有正确传递。您是否正在将

连接
和动作创建者导入到您的文件中？是的，这是我的代码，也许您找到了一些东西。我已修复了它。我在mapDispatchToProps中返回后推迟了括号。