Cómo obtener valor del componente Seleccionar / Opción del diseño de Ant

Solución:

Utilizar onChange que se dispara cuando cambia el valor de la selección. documentación antd select

<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>

ejemplo de trabajo

Algo similar al enfoque javascript clásico, que pretendía usar, podría usarse getFieldValue.
Pero acoplando a coherente createRef , Form y Form.Item como a continuación.

Al obtener valores, recuerde hacer referencia al Form.Item nombre y no el Input uno 😉

He creado una demostración de sandbox con la esperanza de que otras personas disfruten o contribuyan.

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"));

---

---

Utiliza Nuestro Buscador