javascript - 为什么我无法在状态下操作我的表单对象？

Question

我试图在用户插入时以不可变的方式在我的状态下操作我的表单对象。

我尝试根据用户输入操作我的表单对象的状态属性，但它似乎不起作用。我尝试在表单对象之外的状态中添加另一个属性，以查看问题是否会持续存在，而不会。所以，我现在认为我的对象遍历可能不正确，或者我遗漏了一些太明显的东西。

import React, {Component} from 'react'

import { withStyles } from '@material-ui/core/styles';

import * as actions from '../../../store/actions/index'
import {Paper, Typography,Button} from '@material-ui/core'
import TextField from '@material-ui/core/TextField';



class SignUp extends Component{

state={
        formControl:{
            username:{
                value:'',
                placeHolder: 'Username',
                validation:{
                    required: true
                },
                touched:false,
                valid:false,
            },
            email:{
                value:'',
                placeHolder: 'E-mail',
                validation:{
                    required: true
                },
                touched:false,
                valid:false,
            },
            password:{
                value:'',
                placeHolder: 'Password',
                validation:{
                    required: true,
                    minLength:5,
                    maxLength:9
                },
                touched:false,
                valid:false,
            },
            confirmPassword:{
                value:'',
                placeHolder: 'Confirm Password',
                validation:{
                    required: true
                },
                touched:false,
                valid:false,
            },
            // hold:''
        }


}

inputHandler=(event, identifier)=> {

    const updatedState={...this.state.formControl}

    const updatedFormControl={
        ...updatedState[identifier]
    }
    // console.log(updatedFormControl.value= event.target.value)

    updatedFormControl.value= event.target.value
    console.log(updatedFormControl.value)


    this.setState({formControl:updatedState  })



}
render(){
    const { classes } = this.props;
    return(
        <Paper className={classes.root}>
        <Typography variant='h4'> Sign Up</Typography>
            <form className={classes.container} action="">
                <TextField
                    required
                    id="username"
                    label="Username"
                    className={classes.textField}
                    value={this.state.formControl.username.value}
                    onChange={(event)=>this.inputHandler(event,'username')}
                    margin="normal"
                />
                 <TextField
                    required
                    id="standard-name"
                    label="E-mail"

                    className={classes.textField}
                    margin="normal"
                    />
                     <TextField
                    required
                    id="standard-name"
                    label='Password'

                    className={classes.textField}
                    margin="normal"
                 />
                    <TextField
                    required
                    id="standard-name"
                    label='Confirm Password'

                    className={classes.textField}
                    margin="normal"
                 />
                 <Button variant="contained" color="primary" className={classes.button}>  Sign Up  </Button>
        </form>
        </Paper>

    )
}

在我所有的尝试之后，我将我想要操作的属性记录到控制台，并且一直看到一个空字符串，就像它被初始化的那样。我真的无法弄清楚我在这里错过了什么。非常感谢您。

Answer 1

您将 updatedState 设置为未更改的 formControl

像这样改变inputHandler

inputHandler = (event, identifier) => {

    const updatedState = {...this.state.formControl,
        [identifier]: {...this.state.formControl[identifier], value: event.target.value}
    };

    console.log(updatedState)


    this.setState({formControl: updatedState})


}