javascript - 如何获取 Ant Design Option 值并将其传递到 React 中的 POST

Question

我还没有找到任何能满足我需求的喷气式飞机。我想访问我的 Ant Design Select 项目值并将其传递给 POST 但不知何故我得到如下所示的错误：

无法读取 null 的属性“运动”

我应该更改我的 onChange 方法还是在我的情况下可能出现什么问题？

我的 Form.js 文件：

import React from "react";
import { Form, Input, Button, Select } from "antd";

import axios from "axios";

const FormItem = Form.Item;

const { Option } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}


class CustomForm extends React.Component {

    handleFormSubmit = (event, requestType, trainingID) => {
        const title = event.target.elements.title.value;
        const content = event.target.elements.content.value;
        const organizeremail = event.target.elements.organizeremail.value;
        const sport = this.state.sport.value;

        switch ( requestType ) {
            case 'post':
                return axios.post('http://127.0.0.1:8000/api/', {
                    title: title,
                    content: content,
                    organizeremail: organizeremail,
                    sport: sport,
                })
                .then(res => console.log(res))
                .catch(error => console.err(error));
            case 'put':
                return axios.put(`http://127.0.0.1:8000/api/${trainingID}/`, {
                    title: title,
                    content: content
                })
                .then(res => console.log(res))
                .catch(error => console.err(error));
        }
    }

    render() {
        return (
          <div>
            <Form onSubmitCapture={(event) => this.handleFormSubmit(
                event,
                this.props.requestType,
                this.props.trainingID)}>
              <FormItem label="Pealkiri">
                <Input name="title" placeholder="..." />
              </FormItem>
              <FormItem label="Spordiala">
                <Select name="sport" defaultValue="lucy" style={{ width: 120 }} onChange={this.handleChange}>
                    <Option value="jooks" >Jooks</Option>
                    <Option value="jõud" >Jõud</Option>
                    <Option value="crossfit" >Crossfit</Option>
                    <Option value="kardio" >Kardio</Option>
                </Select>
              </FormItem>
              <FormItem label="Kirjeldus">
                <Input name="content" placeholder="..." />
              </FormItem>
              <FormItem label="Teie (treeningu korraldaja) email">
                <Input name="organizeremail" placeholder="..." />
              </FormItem>
              <FormItem>
                <Button type="primary" htmlType="submit" shape="round" >
                  {this.props.btnText}
                </Button>
              </FormItem>
            </Form>
          </div>
        );
    }
}

export default CustomForm;

在“运动”下，我应该得到我选择的值，但它不会发生。

标签： javascriptreactjspostselectaxios