Question

我正在使用React Hooks-useState和useEffect-从Material UI提供的文本字段中抓取电子邮件/密码形式的输入（特别是使用该页面上“ Customized Inputs”下的BootstrapInput）。 / p>

我看过类似的关于使用React Hooks获取表单值的StackOverflow问题。不幸的是，这些解决方案对我不起作用，因为我认为我的问题是我使用的Material UI Text Field。在其他问题的解决方案中，代码使用简单的无样式input标签。

我尝试将handleChange函数放在InputField.js中-在这种情况下，values.email和values.password被更新并正确打印。但是，验证（使用validate函数）必须保留在Form.js之内。 handleChange使用useState（setValues）来设置values变量，而validate使用values。因此，handleChange必须保留在我遇到问题的Form.js中。

此处工作的演示：https://glitch.com/~blue-peridot（单击项目名称旁边左上角的显示，然后打开实际的浏览器控制台以查看输出...忽略来自浏览器的警告）

首先：

从Form.js中-我希望在InputField中输入values.email和values.password（第29-30行）后，会将它们打印到控制台。

实际输出-undefined

第二：

isSubmitting落后了一步。我希望一次单击“登录”后，isSubmitting的值将设置为True（假设输入有效）。但是，直到第二次单击后，该值才会更新。

Answer 1

您需要在InputField组件上传递道具。目前，您只有label作为道具。

例如

const InputField = ({
    label,
...others
}) => {
    const classes = useStyles();
    return (
        <div className={classes.root}>
            <FormControl className={classes.margin}>
                <InputLabel className={classes.label} shrink htmlFor="bootstrap-input">
                    {label}
                </InputLabel>
                <BootstrapInput {...others} />
            </FormControl>
        </div>
    )
}

或者您只能通过特定道具。

Answer 2

Form.js中的一些内容：

您的useEffect钩子缺少对isSubmitting和handleChange的依赖。
您应该可以将validate移到组件之外。
可选，但是：由于将handleChange和handleSubmit传递给其他组件，因此将它们包裹在useCallback钩子中将提高性能，例如

const handleChange = useCallback((event) => {
 event.persist();
 setValues(values => ({ ...values, [event.target.name]: event.target.value }));
}, [values]);

const handleSubmit = useCallback((event) => {
 if (event) event.preventDefault();
 setErrors(validate(values));
 setIsSubmitting(true);
}, [values]);

如果您已设置ESLint，则可以使用eslint-plugin-react-hooks来解决这些问题。

MaterialUI文本字段输入通过React Hooks获得“未定义”值

2 个答案: