如何从 Ant design 的 Select/Option 组件中获取价值

Question

我想从我的选择中检索值，以便发出发布请求。我从文本输入中获取没有问题，但由于某种原因，我无法从下拉菜单选择中获取它。我最终得到一个 "TypeError: Cannot read property 'value' of undefined"

这是我正在使用的代码。

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

const { Option } = Select;

class ItemForm extends React.Component {

  handleFormSubmit = event => {
    event.preventDefault();
    const name = event.target.elements.name.value;
    const description = event.target.elements.description.value;
    const category = event.target.elements.category.value;
    console.log(name, description, this.refs.category.value);
  };

  render() {
    return (
      <div>
        <Form onSubmit={this.handleFormSubmit}>
          <Form.Item label="Form Layout" />
          <Form.Item label="Product Name">
            <Input name="name" placeholder="Ex: Organic Apple..." />
          </Form.Item>
          <Form.Item label="Description">
            <Input name="description" placeholder="Ex: Juicy organic apples!" />
          </Form.Item>
          <Form.Item label="Category">
            <Select name="category" placeholder="Please select a category">
              <Option value="Fruit">Fruit</Option>
              <Option value="Vegetable">Vegetable</Option>
              <Option value="Poultry">Poultry</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
export default ItemForm;

Answer 1

Use onChange which is fired when the value of the select changes. antd select documentation

<Form.Item label="Category">
  <Select 
    onChange={(value) => {
      alert(value)
    }} 
    name="category" 
    placeholder="Please select a category">
      <Option value="Fruit">Fruit</Option>
      <Option value="Vegetable">Vegetable</Option>
      <Option value="Poultry">Poultry</Option>
  </Select>
</Form.Item>

working example

Answer 2

您打算使用的类似于经典 javascript 方法的东西可以使用 getFieldValue。
但耦合到连贯的createRef、Form 和Form.Item，如下所示。

获取值时，请记住引用 Form.Item 名称而不是 Input 一个 ;-)

我创建了一个sandbox demo，希望其他人会喜欢或贡献。

import React from "react";
import { Form, Input, Button, Select } from "antd";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css"; //export default ItemForm;

const { Option } = Select;

class ItemForm extends React.Component {
  formRef = React.createRef();

  handleFormSubmit = event => {
    event.preventDefault();
    console.log("All field values", this.formRef.current.getFieldsValue());
    const name = this.formRef.current.getFieldValue("productName"); //OLD event.target.elements.name.value;
    const description = this.formRef.current.getFieldValue("description"); //OLD event.target.elements.description.value;
    const category = this.formRef.current.getFieldValue("category"); //OLD event.target.elements.category.value;
    console.log(name, description, category);
    alert(`${name}, ${description}, ${category}`);
  };

  render() {
    return (
      <div>
        <Form ref={this.formRef} onSubmit={this.handleFormSubmit}>
          <Form.Item label="Form Layout (Form.Item-createRef-getFieldValue Example)" />
          <Form.Item label="Product Name" name="productName">
            <Input name="name" placeholder="Ex: Organic Apple..." />
          </Form.Item>
          <Form.Item label="Description" name="description">
            <Input name="description" placeholder="Ex: Juicy organic apples!" />
          </Form.Item>
          <Form.Item label="Category" name="category">
            <Select name="category" placeholder="Please select a category">
              <Option value="Fruit">Fruit</Option>
              <Option value="Vegetable">Vegetable</Option>
              <Option value="Poultry">Poultry</Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              onClick={this.handleFormSubmit}
            >
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
ReactDOM.render(<ItemForm />, document.getElementById("container"));

Answer 3

使用 onChange 管理它，如下所示。

state = {
    status: ""
  };

          <Form.Item label="Status">
            <Select
              name="status"
              onChange={value => {
                this.setState({ status: value });
              }}
              placeholder="Please choose the status"
            >
              <Option value="new">New</Option>
              <Option value="open">Open</Option>
              <Option value="rejected">Rejected</Option>
              <Option value="deferred">Deferred</Option>
              <Option value="reopened">Reopened</Option>
            </Select>
          </Form.Item>

Answer 4

与您所期望的不同，在 Ant Design Select 中您无法通过调用获得值：

onChange={(e)=>console.log(e.target.value)}

没有。相反，您只需访问事件本身即可直接获取值，如下所示：

onChange={(e)=>console.log(e)}

Answer 5

您可以按如下方式解决此问题。 （适用于 Antd）

 <Select
    onChange={(text, index) => {
    console.log(index.children);
    }}
 >

Answer 6

避免此问题的更好更简洁的方法是在数组中定义所有表单值和标签，并将其传递到 .声明或使用 onChange 事件并将事件的值存储在您的状态中。