我无法更改 React 挂钩中的输入值答案

【问题标题】：I can't change input value in React hooks我无法更改 React 挂钩中的输入值
【发布时间】：2020-12-25 15:33:51
【问题描述】：

我对 React 和 Hooks 还很陌生，并试图用 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

【问题讨论】：

因为TextInput中没有event.target.name绑定
您能否为所有组件添加导入，因为我在材质 UI 中看不到 TextInput，如果是您自己的，请也添加该代码。
我使用这些版本的材料 ui "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "@material -ui/system": "^4.9.14",

标签： reactjs material-ui react-hooks

【解决方案1】：

您还没有在 TextInput 上定义 name 属性，如下所示..


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

【讨论】：

谢谢，我为每个 TextInput 添加了 name 属性，但仍然无法正常工作:(

【解决方案2】：

您不能传播变量。即const。您正在onChange 函数内传播输入值的状态：...values。在这里，您只是触发与该特定输入标签关联的值。并且当您想要动态更改它时，您将 e.target.name 用方括号括起来。而且你也没有填充状态。您一次只进行一次更改。扩展运算符用于制作先前状态的副本，然后用新项目填充数组。在输入标签中，您不要这样做。您只需更改一次值。如果你想改变，你抹掉并输入一个新的。这就是您不必传播状态的原因。

所以重写你的代码：

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

祝你有美好的一天。

【讨论】：