我无法更改 React 钩子中的输入值

Question

I'm quite new to React and Hooks and trying to make contact form with hooks. I can't change my values in the field and can't type anything in the input and the onChange() is not firing. But there is no error on browser and console, so I can not figure it out. Do you know the reason?

Here is my code.

import React , {useState} from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import TextInput from './TextInput'

const FormDialog = props => {
    const {
        handleClose,
        open,
    } = props;

    const [values, setValues] = useState({
        name: "",
        email: "",
        description: ""
    });
    
    
    const handleChange = event => {
        setValues({
          ...values,
          [event.target.name]: event.target.value
        });
      };


    return(
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        >
        <DialogTitle id="alert-dialog-title">Contact Form</DialogTitle>
        <DialogContent>
            
        <TextInput 
            label={“name} multiline={false} rows={1}
            value={values.name} type={"text"} onChange={handleChange} 
        />

        <TextInput 
            label={“email”} multiline={false} rows={1}
            value={values.email} type={"email"} onChange={handleChange} 
        />

        <TextInput 
            label={“more”} multiline={false} rows={5}
            value={values.description} type={"text"} onChange={handleChange} 
        />
        </DialogContent>
        <DialogActions>
        <Button onClick={props.handleClose} color="primary">
            cancel
        </Button>
        <Button onClick={submitForm} color="primary" autoFocus>
           send
        </Button>
        </DialogActions>
      </Dialog>
    )
}

export default FormDialog

Answer 1

You have not defined name attribute on TextInput like below..

<TextInput 
            label={“name} multiline={false} rows={1} name="name"
            value={values.name} type={"text"} onChange={handleChange} 
        />

        <TextInput 
            label={“email”} multiline={false} rows={1} name="email"
            value={values.email} type={"email"} onChange={handleChange} 
        />

Answer 2

You can't spread a variable. That is, const . You're spreading the state of the input value inside the onChange function: ...values . Here you're just firing the value associated with that particular input tag. And as you want to change it dynamically, you're enclosing the e.target.name with the square brackets. And also you're not populating the state. Your just making the changes once at a time. The spread operator is used to make a copy of the previous state and then fill the array with new items. Here in the input tag, you don't do that. You just change the values once. If you want to change, you erase and enter a new one. That is the reason you don't have to spread the state.

So Re-write your code with:

setValue({ [event.target.name] : event.target.value }) inside your onChange function

Have a nice day.