Question

我想知道如何通过动作有效载荷输入值？

在我的组件中，我有电子邮件输入，例如

<input type="email" value={this.state.email} onChange={this.handleChange}/>
 <input type="password" value={this.state.password} onChange={this.password}/>

我的组件中有一个状态：

state = {
        email: '',
        password: ''
    };

并且我通过onChange方法获得了价值：

handleChange = (e) => {
        this.setState({email: e.target.value});
    }
 password = (e) => {
        this.setState({password: e.target.value})
    }

在提交表单时，我必须运行一些功能，在这里我要调度我的动作

login = () => {
        this.props.userLogin() 
    }

在我的mapDispatchToProps中

调度我的userLogin操作。但是我如何才能在此处传递动作有效载荷this.state.email和this.state.password以在我的动作中发送api？

function mapDispatchToProps(dispatch) {
    return {
        userLogin: bindActionCreators(userLogin, dispatch),
    }
}

Answer 1

在分派动作时，您可以将所需的值作为参数传递，例如

login = () => {
    this.props.userLogin(this.state.email, this.state.password); 
}

，在action.js文件的useLogin方法中，您可以读取这些参数，例如

const userLogin = (email, password) => {
   // your userLogin code here
}

Answer 2

您可以执行以下操作：

function mapDispatchToProps(dispatch, props) {
    return {
        userLogin: bindActionCreators(props.loginInfo, dispatch),
    }
}

，您可以通过以下方式调用它：

login = () => {
        this.props.userLogin(this.state);
        // state will habe password and username as {username, password}
    }

Answer 3

您可以在动作创建者中传递状态对象，并在动作创建者中接收状态对象，就像收到的参数一样。

Answer 4

我解决了问题，第一种方法一切都正常。这里的问题是使用构造函数在组件中设置状态。当我删除构造函数时，一切正常。

React Redux如何传递给行动负载目标值

4 个答案: