Redux 从 Presentation 组件提交表单到容器组件

Question

我正在使用一个简单的登录表单，我有 LoginContainer（容器组件）和 Login（演示组件），我正在尝试提交表单并访问容器组件中的数据。

这是我的代码

登录.js：

export default class Login extends React.Component {

    constructor() {
        super();
    }

    render() {
        return (
            <div className="login jumbotron center-block">
                <h1>Login</h1>
                <form role="form">
                    <div className="form-group">
                      <label htmlFor="username">Username</label>
                      <input type="text"  className="form-control" ref="username" placeholder="Username" />
                    </div>
                    <div className="form-group">
                      <label htmlFor="password">Password</label>
                      <input type="password" className="form-control" ref="password" placeholder="Password" />
                    </div>
                    <div className="form-group">
                        <button type="submit" className="btn btn-default" onClick={()=>{this.props.login(this.refs.username,this.refs.password)}}>Submit</button>
                    </div>  
                </form>
            </div>
        );
    }
}

而容器组件是：

class LoginContainer extends React.Component{

    constructor(props){
        super(props);
    }

    render(){
        return(
          <div>
            <Login login={this.loginUser}/>
          </div>  

        );
    }

}

function mapStateToProps(state){
    return state;
}

function mapDispatchToProps(dispatch){
    return{
        login : (username,password) => {
               console.log('mapDispatchToProps : username=['+username+'] password=['+password+']');
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(LoginContainer);

上面的代码在提交的事件处理程序中不起作用，我无法访问 this.refs

Uncaught ReferenceError: refs is not defined

我不想维护登录组件的状态。我可以轻松地在 Login 中使用用户名和密码创建状态，并在用户名和密码控件上使用 setState 和 onclick 或 onchange。

有没有办法通过表单提交将表单元素的数据从 Presentation 组件发送到 Container 组件？

谢谢

Answer 1

您需要在 Login.js 文件中创建事件处理方法，并使用构造函数中的 bind 函数将它们绑定到组件上下文。

export default class Login extends React.Component {

    constructor() {
        super();
        this.login = this.login.bind(this);
    }

    login() {
        this.props.login(this.refs.username,this.refs.password)
    }

    render() {
        return (
            <div className="login jumbotron center-block">
                <h1>Login</h1>
                <form role="form">
                    <div className="form-group">
                      <label htmlFor="username">Username</label>
                      <input type="text"  className="form-control" ref="username" placeholder="Username" />
                    </div>
                    <div className="form-group">
                      <label htmlFor="password">Password</label>
                      <input type="password" className="form-control" ref="password" placeholder="Password" />
                    </div>
                    <div className="form-group">
                        <button type="submit" className="btn btn-default" onClick={this.login}>Submit</button>
                    </div>  
                </form>
            </div>
        );
    }
}

这种方式你不需要维护逻辑组件的状态，你只需使用从容器传递的道具。