Reactjs Redux将表单从表示组件提交到容器组件

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

这是我的密码

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

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

有没有办法通过表单提交将表单元素的数据从表示组件发送到容器组件

---

谢谢

您需要在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>
        );
    }
}

导出默认类登录扩展React.Component{
构造函数（）{
超级（）；
this.login=this.login.bind（this）；
}
登录（）{
this.props.login（this.refs.username，this.refs.password）
}
render（）{
返回(
登录
用户名
密码
提交
);
}
}

---

这样，您就不用维护逻辑组件的状态，只需使用从容器传递的道具。

非常感谢。然而，当我尝试它时，我得到了一个错误：Login.js？9830:8 uncaughttypeerror:无法读取未定义的属性“bind”。当我使用下面的方法时，它是如何工作的。this.loginCaller=（）=>this.longinCaller（）；我在我的其他项目中使用了bind，它在我所有的构造函数中都起作用。不知道为什么这里会出错。不管怎样，谢谢你指出。bind（）按预期工作。对不起，我的代码有一个输入错误。。。啊..谢谢

Uncaught ReferenceError: refs is not defined

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