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})


}

Answer 2

因为您正在更新状态this.setState({formControl:updatedState })，但是updatedState设置为this.state.formControl，所以它被卡在递归更新中。也许您想将其设置为updatedFormControl

为什么我无法在状态下操纵表单对象？

2 个答案: