TypeError：无法读取未定义 React 的属性“值”，Ant 选择

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

antd select组件的onChange事件不提供事件对象，它提供了实际被选中的值。

相反，将您的 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 事件传入的事件值。这将表明它实际上是被选择的值，而不是事件对象。

编辑：

我不确定这是否是偶然的，但缺少 <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>
    );
  }
}