类型错误：无法读取未定义 React 的属性'value'，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>
);
}
}