TypeError: невозможно прочитать значение свойства undefined React, Ant select

Question

Я не могу получить значение React Ant Form Select, так как оно не определено. Я пробовал обновить состояние, но ничего не решает эту проблему. Ошибка находится под методом handleChange. Возможно, я использую неправильную форму дизайна Ant. В чем может быть проблема?

Мой код формы:

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

import axios from "axios";

const FormItem = Form.Item;

const { Option } = Select;


class CustomForm extends React.Component {

    constructor(props) {
        super(props)
        this.state = {sport: ''};
        this.handleChange = this.handleChange.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    handleChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    handleFormSubmit = (event, requestType, trainingID) => {
        const sport = event.targets.elements.sport.value;
        ...
    }

    render() {
        return (
          <div>
                <Select name="sport" value={this.state.sport} 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>
                <Button type="primary" htmlType="submit" shape="round" >
                  {this.props.btnText}
                </Button>
              </FormItem>
            </Form>
          </div>
        );
    }
}

Answer 1

Событие onChange для компонента выбора antd не предоставляет объект события, оно предоставляет фактическое значение, которое было выбрано.

Вместо этого измените свой метод handleChange на

  handleChange(name, value) {
    this.setState({
      [name]: value
    });
  }

а затем измените выбранную функцию onChange на

onChange={value => this.handleChange("sport", value)}

Итак, он хотел бы, чтобы это было

    <Select
      name="sport"
      value={this.state.sport}
      style={{ width: 120 }}
      onChange={value => this.handleChange("sport", value)}
    >
      <Option value="jooks">Jooks</Option>
      <Option value="jõud">Jõud</Option>
      <Option value="crossfit">Crossfit</Option>
      <Option value="kardio">Kardio</Option>
    </Select>

Самый простой способ отладить эту ситуацию - записать в консольный журнал значение события, переданное в из события onChange. Это показало бы, что на самом деле было выбрано значение, а не объект события.

EDIT:

Я не уверен, что это было случайно, но теги <Form> и <FormItem> отсутствовали. Я добавил полный класс ниже

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

import axios from "axios";

const FormItem = Form.Item;

const { Option } = Select;

export default class CustomForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { sport: "" };
    this.handleChange = this.handleChange.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleChange(name, value) {
    this.setState({
      [name]: value
    });
  }

  handleFormSubmit = value => {
    console.log(this.state);
  };

  render() {
    return (
      <div>
        <Form onFinish={this.handleFormSubmit}>
          <FormItem>
            <Select
              name="sport"
              value={this.state.sport}
              style={{ width: 120 }}
              onChange={value => this.handleChange("sport", value)}
            >
              <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>
            <Button type="primary" htmlType="submit" shape="round">
              {this.props.btnText}
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}