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

Posted 2023-02-22

【中文标题】我无法更改 React 挂钩中的输入值

【英文标题】：I can't change input value in React hooks

【发布时间】：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",

【参考方案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 函数中

祝你有美好的一天。