Question

我对React和Hooks很陌生，并尝试使用钩子建立联系表。我无法在字段中更改值，也无法在输入中键入任何内容，并且onChange（）不会触发。但是在浏览器和控制台上没有错误，因此我无法弄清楚。你知道原因吗？

这是我的代码。


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

您尚未在TextInput上定义名称属性，如下所示。


<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

你不能传播一个变量。也就是说，data = {'Records': [{'Results': 'YE01'}], 'TotalRecords': 1, 'TransmissionResults': '', 'Version': '5.0.1.1043'} name = data['Records'][0]['PrimaryOwner'][0]['Name1Full'][0] print('name: ' + name)。您正在 const 函数内传播输入值的状态：onChange。在这里，您只是触发与该特定输入标签关联的值。当您想动态更改它时，您将 e.target.name 用方括号括起来。而且你没有填充状态。您只需一次进行一次更改。展开运算符用于复制先前状态，然后用新项目填充数组。在输入标签中，您不要这样做。您只需更改一次值。如果要更改，请擦除并输入新的。这就是您不必传播状态的原因。

所以重写你的代码：

...values 在您的 setValue({ [event.target.name] : event.target.value }) 函数中

祝你有美好的一天。

我无法在React挂钩中更改输入值

2 个答案: