Reactjs 反应-设置状态不'；不清除文本框
我想在成功或错误时清除文本框字段。我该怎么做 成功或错误时，调用函数以显示快餐店。在这里面，我正在更新状态。但它并没有起到很好的作用 谢谢你的帮助 功能 文本框Reactjs 反应-设置状态不'；不清除文本框,reactjs,Reactjs,我想在成功或错误时清除文本框字段。我该怎么做 成功或错误时，调用函数以显示快餐店。在这里面，我正在更新状态。但它并没有起到很好的作用 谢谢你的帮助 功能 文本框 ； 成分 import React，{Component}来自“React” 从“@material ui/core/styles/withStyles”导入withStyles； 从“@material ui/core/CircularProgress”导入CircularProgress； 从“@material ui/core/
；
import React，{Component}来自“React”
从“@material ui/core/styles/withStyles”导入withStyles；
从“@material ui/core/CircularProgress”导入CircularProgress；
从“@material ui/core/TextField”导入TextField；
从“./uiComponents/Grid/GridItem.jsx”导入GridItem；
从“./uiComponents/Grid/GridContainer.jsx”导入GridContainer；
从“./uiComponents/CustomButtons/Button.jsx”导入按钮；
从“./uiComponents/Card/Card.jsx”导入卡片；
从“./uiComponents/Card/CardHeader.jsx”导入CardHeader；
从“./uiComponents/Card/CardBody.jsx”导入CardBody；
从“./uiComponents/Card/CardFooter.jsx”导入CardFooter；
从“@material ui/core/Snackbar”导入Snackbar；
从“@material ui/icons/Close”导入CloseIcon；
从“react router dom”导入{Redirect}
从“@material ui/core/IconButton”导入IconButton；
从“react redux”导入{connect}
从“redux”导入{compose}
从“../../store/actions/auth”导入{changePassword}
常量样式={
文本字段：{
字体大小：“5px”
},
};
类ChangePassword扩展组件{
建造师（道具）{
超级（道具）；
此.state={
加载：false，
开：错，
消息：“”，
cp\u当前密码：“”，
cp_新密码：“”，
cp\u确认密码：“”
}
}
componentDidUpdate=（prevProps）=>{
const{authError}=this.props；
console.log（authError）
if（authError！=prevProps.authError）{
这是我的国家(
{
加载：false，
消息：authError，
开放：是的
})
}
};
handleChange=（e）=>{
这是我的国家({
[e.target.id]：e.target.value
})
}
openSnackbar=（{message}）=>{
这是我的国家({
开放：是的，
cp\u当前密码：“”，
cp_新密码：“”，
cp\U确认密码：“”，
消息
});
};
handleSubmit=（e）=>{
e、 预防默认值（）；
让curpass=this.state.cp\u currentPassword
让newpass=this.state.cp\u newPassword
this.setState（{loading:true}）；
this.props.changePassword（curpass、newpass、this.passwordUpdated）
}
passwordUpdated=（）=>{
这是我的国家({
消息：“密码已成功更改。！”，
开放：是的，
加载：false，
cp\u当前密码：“”，
cp_新密码：“”，
cp\u确认密码：“”
});
};
render（）{
const{classes，auth，authError}=this.props；
console.log（authError）
const{loading}=this.state；
常量消息=(
);
如果（！auth.uid）返回
返回(
{/*{authError？this.openSnackbar（{消息：{authError}}}）：null}*/}
{/*{authError&&！this.state.open？this.openSnackbar（{消息：{authError}}}）：null}*/}
修改密码
this.handleSubmit（e）}disabled={loading}>
{加载&&}
修改密码
this.setState（{open:false，消息：'}）}
行动={
//clearAuthError
this.setState（{open:false，消息：“”}）
}
>
}
自动隐藏={3000}
/>
)
}
}
常量mapstateToProps=（状态）=>{
返回{
auth:state.firebase.auth，
authError:state.authroot.autherr
}
}
const mapDispatchtoProps=（调度，获取状态）=>{
返回{
changePassword：（currentPassword，newPassword，PasswordUpdate）=>{dispatch（changePassword（currentPassword，newPassword，PasswordUpdate）），
}
}
导出默认组合(
用样式（样式），
连接（MapStateTrops、mapDispatchtoProps）
)（更改密码）；
handleSubmit此密码。密码已更新handleSubmit = (e) => {
e.preventDefault();
let curpass = this.state.cp_currentPassword
let newpass = this.state.cp_newPassword
this.setState({ loading: true });
this.props.changePassword(curpass, newpass, this.passwordUpdated) //Remove this.passwordUpdated from here
}
ComponentWillReceivePropscomponentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps', nextProps);
if (this.props.authError !== nextProps.authError) {
// here you can make your textbox empty
this.setState({
cp_currentPassword: '',
cp_newPassword: '',
cp_confirmPassword: ''
});
}
}
import React, { Component } from 'react'
import withStyles from "@material-ui/core/styles/withStyles";
import CircularProgress from '@material-ui/core/CircularProgress';
import TextField from '@material-ui/core/TextField';
import GridItem from "../uiComponents/Grid/GridItem.jsx";
import GridContainer from "../uiComponents/Grid/GridContainer.jsx";
import Button from "../uiComponents/CustomButtons/Button.jsx";
import Card from "../uiComponents/Card/Card.jsx";
import CardHeader from "../uiComponents/Card/CardHeader.jsx";
import CardBody from "../uiComponents/Card/CardBody.jsx";
import CardFooter from "../uiComponents/Card/CardFooter.jsx";
import Snackbar from '@material-ui/core/Snackbar';
import CloseIcon from '@material-ui/icons/Close';
import { Redirect } from 'react-router-dom'
import IconButton from '@material-ui/core/IconButton';
import { connect } from 'react-redux'
import { compose } from 'redux'
import { changePassword } from '../../store/actions/auth'
const styles = {
textField: {
fontSize: '5px'
},
};
class ChangePassword extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
open: false,
message: '',
cp_currentPassword: '',
cp_newPassword: '',
cp_confirmPassword: ''
}
}
componentDidUpdate = (prevProps) => {
const { authError } = this.props;
console.log(authError)
if (authError != prevProps.authError) {
this.setState(
{
loading: false,
message: authError,
open: true
})
}
};
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
})
}
openSnackbar = ({ message }) => {
this.setState({
open: true,
cp_currentPassword: '',
cp_newPassword: '',
cp_confirmPassword: '',
message
});
};
handleSubmit = (e) => {
e.preventDefault();
let curpass = this.state.cp_currentPassword
let newpass = this.state.cp_newPassword
this.setState({ loading: true });
this.props.changePassword(curpass, newpass, this.passwordUpdated)
}
passwordUpdated = () => {
this.setState({
message: 'Password changed Successfully.!',
open: true,
loading: false,
cp_currentPassword: '',
cp_newPassword: '',
cp_confirmPassword: ''
});
};
render() {
const { classes, auth, authError } = this.props;
console.log(authError)
const { loading } = this.state;
const message = (
<span
id="snackbar-message-id"
dangerouslySetInnerHTML={{ __html: this.state.message }}
/>
);
if (!auth.uid) return <Redirect to='/signin' />
return (
<div>
{/* {authError ? this.openSnackbar({ message: '{authError}' }) : null} */}
{/* {authError && !this.state.open ? this.openSnackbar({ message: '{authError}' }) : null} */}
<GridContainer>
<GridItem xs={12} sm={12} md={12}>
<Card>
<CardHeader color="warning">
<h4 className={classes.cardTitleWhite}>Change Password</h4>
</CardHeader>
<form >
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<CardBody>
<GridContainer>
<GridItem xs={12} sm={12} md={12}>
<TextField
id="cp_currentPassword"
label="Current Password"
type="password"
fullWidth
className={classes.textField}
value={this.state.cp_currentPassword}
onChange={this.handleChange}
margin="normal"
required={true}
/>
</GridItem>
<GridItem xs={12} sm={12} md={12}>
<TextField
id="cp_newPassword"
label="New Password"
type="password"
fullWidth
className={classes.textField}
value={this.state.cp_newPassword}
onChange={this.handleChange}
margin="normal"
required={true}
/>
</GridItem>
<GridItem xs={12} sm={12} md={12}>
<TextField
id="cp_confirmPassword"
label="Confirm Password"
type="password"
fullWidth
className={classes.textField}
value={this.state.cp_confirmPassword}
onChange={this.handleChange}
margin="normal"
required={true}
/>
</GridItem>
</GridContainer>
</CardBody>
<CardFooter>
<Button color="warning" onClick={(e) => this.handleSubmit(e)} disabled={loading}>
{loading && <CircularProgress style={{ color: 'white', height: '20px', width: '20px', marginRight: '10px' }} />}
Change Password
</Button>
</CardFooter>
</GridItem>
</GridContainer>
</form>
</Card>
</GridItem>
</GridContainer>
<Snackbar
open={this.state.open}//{!!this.props.authError}//
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
message={message}
variant="error"
onClose={() => this.setState({ open: false, message: '' })}
action={
<IconButton
key="close"
aria-label="Close"
color="inherit"
className={classes.close}
onClick={() =>
// clearAuthError
this.setState({ open: false, message: '' })
}
>
<CloseIcon className={classes.icon} />
</IconButton>
}
autoHideDuration={3000}
/>
</div>
)
}
}
const mapstateToProps = (state) => {
return {
auth: state.firebase.auth,
authError: state.authroot.autherr
}
}
const mapDispatchtoProps = (dispatch, getState) => {
return {
changePassword: (currentPassword, newPassword, passwordUpdated) => { dispatch(changePassword(currentPassword, newPassword, passwordUpdated)) },
}
}
export default compose(
withStyles(styles),
connect(mapstateToProps, mapDispatchtoProps)
)(ChangePassword);
handleSubmit = (e) => {
e.preventDefault();
let curpass = this.state.cp_currentPassword
let newpass = this.state.cp_newPassword
this.setState({ loading: true });
this.props.changePassword(curpass, newpass, this.passwordUpdated) //Remove this.passwordUpdated from here
}
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps', nextProps);
if (this.props.authError !== nextProps.authError) {
// here you can make your textbox empty
this.setState({
cp_currentPassword: '',
cp_newPassword: '',
cp_confirmPassword: ''
});
}
}