javascript - 无法读取反应中未定义的属性“元素”:事件对象未正确传递
问题描述
我目前正在尝试获取一个表单来提交一些文本,以便我可以通过 axios 将其发送到我的后端 api,并且只是让表单正确提交并访问 react 中的数据时遇到了麻烦。
我一直在关注本教程:https ://youtu.be/w-QJiQwlZzU (我知道这有点过时,因此可能是问题所在)并且正在使用 antd 库中的组件模板来创建我的形式。
目前这是我的表单代码(注意控制台日志只是我试图锻炼问题所在)
import React, { useState } from "react";
import { Form, Input, Button } from "antd";
class CustomForm extends React.Component {
handleFormSubmit = (event) =>{
event.preventDefault();
console.log("Been Submitted");
console.log(event.target);
const github_access_token = event.target.elements.github_access_token.value;
console.log(github_access_token);
}
render() {
return (
<div>
<Form onFinish= {this.handleFormSubmit}>
<Form.Item label="Access Token">
<Input placeholder="Enter New Access Token..." name="github_access_token"/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">Submit</Button>
</Form.Item>
</Form>
</div>
);
}
}
export default CustomForm;
表单正在提交,因为控制台日志正在打印,但我正在尝试解决为什么 event.target 未定义,因为事件对象存在, event.preventDefault() 也导致错误,指出 event.preventDefault 不是函数领先我相信事件对象没有正确传递,但我不知道为什么
任何帮助将不胜感激,谢谢
解决方案
Antd 的onFinish函数给你的是表单values
对象而不是表单event
,因此你得到了未定义的错误。
像这样改变你的功能
handleFormSubmit = (values) =>{
console.log("Been Submitted");
const github_access_token = values.github_access_token;
console.log(github_access_token);
推荐阅读
- java - java frame not changing colour
- javascript - how to add Select All and remove all button on multiInput() shinywidgets
- powershell - 如何为所有用户使用 PowerShell 命令“Get-AdminPowerAppsUserDetails”
- node.js - 枚举数组的猫鼬模式
- c++ - C ++ while循环读取ifstream,不会在eof处停止
- ios - 如何在 iMessage 文本选择上下文菜单中添加自定义操作?
- qt - 通过函数调用 id
- python - 将 tkinter 画布形状放在光标位置
- java - 如何选择特定容器的跨度元素(由 CSS 类定义)使用 Xpath?
- flutter - 颤振滑块颜色