web-dev-qa-db-fra.com

Comment obtenir de la valeur du composant Select / Option de Ant design

Je veux récupérer la valeur de ma sélection pour pouvoir faire des demandes de publication. Je n'ai aucun problème à obtenir de la saisie de texte, mais pour une raison quelconque, je ne peux pas l'obtenir à partir du menu déroulant. Je finis par obtenir un "TypeError: Cannot read property 'value' of undefined"

Voici le code que j'utilise.

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;
javascripthtmlreactjsantd
4
Tesuji

Géré en utilisant onChange comme indiqué ci-dessous.

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