我'm trying to create a login form that makes a API call who returns a token. I'是新的反应和还原因此,我遵循this tutorial .
登录表单是redux-form . 这是代码:
login.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { loginUser } from '../../actions/index';
const form = reduxForm({
form: 'login'
});
class Login extends Component {
handleFormSubmit(formProps) {
this.props.loginUser(formProps);
}
renderAlert() {
if(this.props.errorMessage) {
return (
<div>
<span><strong>Error!</strong> {this.props.errorMessage}</span>
</div>
);
}
}
render() {
const { handleSubmit } = this.props;
return (
<div>
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
{this.renderAlert()}
{/* {this.renderAlert.bind(this)} */}
<div>
<label>Username</label>
<Field name="username" component="input" type="text" />
</div>
<div>
<label>Password</label>
<Field name="password" component="input" type="password" />
</div>
<button type="submit">Login</button>
</form>
</div>
);
}
}
function mapStateToProps(state) {
return {
errorMessage: state.auth.error,
message: state.auth.message
};
}
export default connect(mapStateToProps, { loginUser })(form(Login));
提交表单时,props({username,password})将传递给HandleFormSubmit,然后传递给loginUser函数,该函数是为调用登录API而创建的redux操作 . 这完美地工作但现在我正在尝试将Material Ui集成到样式化的表单领域 .
// input basic version
<Field name="username" component="input" type="text" />
// material-ui version
<Field name="username" component={TextField} type="text" />
通过此更改,props用户名和密码不会传递给handleFormSubmit函数,因此我无法实现正确的API调用来登录用户 . 所以我需要你的帮助来解决这个问题 .
1 回答
您需要将props
redux-form
提供的转换层引入material-ui
组件 . 这包含在redux-form
docs here中 .对于
TextField
,这将是这样的:然后将此组件作为组件传递给
Field
:还有一个库已经有你可能需要的大部分包装器,只需
import
就可以像你所说的那样使用redux-form-material-ui .