Question

我遇到mapDispatchToProps的问题。我怎样才能触发＆＃34;来自mapDispatchToProps的动作使用onClick in按钮？ - 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);

Answer 1

当您使用connect时，“已连接”组件将接收调度功能作为道具。

您可以使用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)} />
}

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

1 个答案: