我正在使用 React、Redux、NodeJS 和 ExpressJS。我还在前端使用 material-ui。我创建了一个对话框,用户可以在其中输入信息和注册。一旦用户点击提交,就会生成一个帖子请求。返回的任何错误都会被放入状态中的错误对象中。如果返回任何错误(例如密码不匹配),它们会在输入字段下方说明。如果单击提交按钮并且没有错误,则对话框保持打开状态。如果没有返回错误,我将如何关闭对话框(state.open 应该变为 false)。我该怎么做。这是我的代码:
authActions.js:
export const registerUser = (userData, history) => dispatch => {
axios
.post("/api/users/register", userData)
.then(res => history.push("/signup/done"))
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
);
};
注册.js:
class SignUpD extends Component {
constructor() {
super();
this.state = {
open: false,
username: "",
email: "",
password: "",
password2: "",
errors: {}
};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
componentDidMount() {
if (this.props.auth.isAutenticated) {
this.props.history.push("/");
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.errors) {
this.setState({ errors: nextProps.errors });
}
}
handleClickOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false, errors: {} });
};
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
onSubmit(e) {
e.preventDefault();
const newUser = {
username: this.state.username,
email: this.state.email,
password: this.state.password,
password2: this.state.password2
};
this.props.registerUser(newUser, this.props.history);
}
render() {
const { errors } = this.state;
return (
<div>
<ListItem
button
style={{ paddingTop: 60, top: 0 }}
onClick={this.handleClickOpen}
>
<ListItemText primary="Sign Up" />
</ListItem>
<Dialog
fullWidth
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="form-dialog-title"
style={{ width: "100" }}
>
<DialogTitle id="form-dialog-title">Register</DialogTitle>
<DialogContent>
<DialogContentText>
Enter registration details here
</DialogContentText>
<TextField
margin="dense"
name="email"
label="Email Address"
value={this.state.email}
fullWidth
onChange={this.onChange}
/>
{errors.email && <div style={{ color: "red" }}>{errors.email}</div>}
<TextField
margin="dense"
name="username"
label="Username"
type="text"
value={this.state.username}
fullWidth
onChange={this.onChange}
/>
{errors.username && (
<div style={{ color: "red" }}>{errors.username}</div>
)}
<TextField
margin="dense"
name="password"
label="Password"
type="password"
value={this.state.password}
fullWidth
onChange={this.onChange}
/>
{errors.password && (
<div style={{ color: "red" }}>{errors.password}</div>
)}
<TextField
margin="dense"
name="password2"
label="Enter Password Again"
value={this.state.password2}
type="password"
fullWidth
onChange={this.onChange}
/>
{errors.password2 && (
<div style={{ color: "red" }}>{errors.password2}</div>
)}
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Cancel
</Button>
<Button onClick={this.onSubmit} color="primary">
Register
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
SignUpD.propTypes = {
registerUser: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth,
errors: state.errors
});
export default connect(
mapStateToProps,
{ registerUser }
)(withRouter(SignUpD));
如果您需要任何说明或有任何疑问,请告诉我。提前致谢。
最佳答案
与其使用组件的本地状态来确定对话框是否应该打开,不如使用 redux store
。这样你就可以调用一个 Action 来从任何地方更新商店,从而控制对话框是否打开。
与在 mapDispatch 中将 registerUser
定义为 props 的方式相同,您可以定义另一个操作来分派(dispatch)类似 {type:'OPEN_DIALOG'}
的内容,然后在您的 reducer 中,您可以通过将 state.dialogIsOpen
设置为 true 来响应 OPEN_DIALOG
事件。然后在您的 mapStateToProps
中,确保您包含来自 redux 状态的 dialogIsOpen
。并将使用 this.state.dialogIsOpen
的任何地方更改为 this.props.dialogIsOpen
关于javascript - 如果发布请求成功则关闭对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52065263/