为什么引发警告:组件正在更改要控制的文本类型的不受控制的输入

时间:2018-12-19 05:15:06

标签: reactjs

我收到以下警告

index.js:1452警告:组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换为受控制(反之亦然)。在组件的生命周期中决定使用受控还是不受控制的输入元素

                const mapDispatchtoProps=sameNameforActiondispatch1=>{
                    return{
                        logIn:(userDetails)=>sameNameforActiondispatch1(logIn(userDetails))
                    }
                }

                class Loginsub extends React.Component {

                    constructor(props){
                        super(props)
                        this.state={
                            userDetails:'',
                            errValdiationemail:'',
                            errValdiationpassword:'',
                            active:''
                        }
                    }

                    handleSubmit(event){
                        event.preventDefault();
                        this.props.logIn(this.state.userDetails);
                        this.props.history.push('/paperbase');
                    }

                    handleChange(eVal,name){
                        this.setState((prevState)=>{
                            {const userDetails=prevState.userDetails
                                return {userDetails:{...userDetails,[name]:eVal}}
                            }
                        })

                    }

                    render(){
                        const { classes } =this.props;
                    // handleSubmit();
                        return (
                            <main className={classes.main}>
                            <CssBaseline />
                            <Paper className={classes.paper}>
                                <Avatar className={classes.avatar}>
                                <LockIcon />
                                </Avatar>
                                <Typography component="h1" variant="h5">
                                Sign in
                                </Typography>
                                <form className={classes.form} onSubmit={this.handleSubmit.bind(this)}>
                                <FormControl margin="normal" required fullWidth>
                                    <InputLabel htmlFor="email">Email Address</InputLabel>
                                    <Input id="email" name="email" autoComplete="email" value={this.state.userDetails.email} autoFocus  onChange={(e)=>this.handleChange(e.target.value,'email')} />
                                </FormControl>
                                <FormControl margin="normal" required fullWidth>
                                    <InputLabel htmlFor="password">Password</InputLabel>
                                    <Input name="password" type="password" id="password" value={this.state.userDetails.password} autoComplete="current-password" onChange={(e)=>this.handleChange(e.target.value,'password')} />
                                </FormControl>
                                <FormControlLabel
                                    control={<Checkbox value="remember" color="primary" />}
                                    label="Remember me"
                                />
                                <Button
                                    type="submit"
                                    fullWidth
                                    variant="contained"
                                    color="primary"
                                    className={classes.submit}
                                >
                                    Sign in
                                </Button>
                                </form>
                            </Paper>
                            </main>
                        );
                    }
                }

                Loginsub.propTypes = {
                classes: PropTypes.object.isRequired,
                };

                const Login=connect(null,mapDispatchtoProps)(Loginsub);

                export default  withRouter(withStyles(styles)(Login));

任何人都可以向我解释我要去哪里了。 一个组件正在更改要控制的文本类型的不受控制的输入。这对我没有意义。怎么样?

0 个答案:

没有答案