0

我目前正在尝试获取一个表单来提交一些文本，以便我可以通过 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 不是函数领先我相信事件对象没有正确传递，但我不知道为什么

任何帮助将不胜感激，谢谢

4

1 回答 1

0

Antd 的onFinish函数给你的是表单values对象而不是表单event，因此你得到了未定义的错误。

像这样改变你的功能

handleFormSubmit = (values) =>{
    console.log("Been Submitted");
    const github_access_token = values.github_access_token;
    console.log(github_access_token);
于 2020-06-04T13:35:10.680 回答