MaterialUI 文本字段输入使用 React Hook 获取'undefined'值

Question

我正在使用React Hooks -USESTATE和使用效果 - 从材料UI提供的文本字段中获取电子邮件/密码表单输入(专门使用该页面上"自定义输入"下的BootstrapInput(。

我研究了有关用React钩获得形式值的类似堆叠式问题。不幸的是，这些解决方案对我不起作用，因为我认为我的问题是我使用的材料UI文本字段。在其他问题的解决方案中，该代码使用简单的未风格的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(单击左上角的显示在项目名称旁边的显示，然后打开您的实际浏览器控制台以查看输出...忽略浏览器的警告(

首先：

from form.js-我期望将其打印到InputField中时，将其打印到控制台上。

实际输出-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中的几件事：

1. 您的useEffect挂钩缺少isSubmitting和handleChange的依赖项。
2. 您应该能够将validate移到组件外。
3. 可选，但是：由于您将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设置或CAN，则Eslint-Plugin-React-Hooks有助于抓住这些问题。