¿Cómo obtener el valor del elemento seleccionado en react-bootstrap?

Hay varios métodos para obtener el valor del elemento en react-bootstrap. Algunos de ellos se discuten a continuación:  

Usando Ref: La primera forma de obtener el valor actualizado del elemento es usando ref. Usando ref, obtenemos la referencia del elemento y se puede acceder a su valor a través de los componentes existentes.

import React, { Component } from "react";
import { Form } from "react-bootstrap";
  
class GeeksForGeeks extends Component {
    constructor() {
        super();
        this.myRef = React.createRef();
    }
    onButtonClick() {
        console.log(this.myRef.current.value);
    }
  
    render() {
        return (
            <div>
                Select element of react-bootstrap
                <hr />
            Select color
                <Form.Control
                    as="select"
                    custom
                    ref={this.myRef}
                >
                    <option value="black">Black</option>
                    <option value="amber">Amber</option>
                    <option value="purple">Purple</option>
                    <option value="magenta">Magenta</option>
                    <option value="white">White</option>
                </Form.Control>
                <button onClick={this.onButtonClick}>
                    Gfg color
                </button>
            </div>
        );
    }
}
  
export default GeeksForGeeks;

Explicación:
• El primer paso es crear Ref en el componente React

  constructor() {
      super();
      this.myRef = React.createRef();
  }

• A continuación, con la propiedad ref agregada, implemente el elemento de selección react-bootstrap seguido del nombre de referencia creado anteriormente.

  render() {
          return (
            <div>
              Select element of react-bootstrap
              <hr />
              Select color
              <Form.Control
                as="select"
                custom
                ref={this.myRef}
              >
                <option value="black">Black</option>
                <option value="amber">Amber</option>
                <option value="purple">Purple</option>
                <option value="magenta">Magenta</option>
          <option value="white">White</option>
              </Form.Control>
              <button onClick={this.onButtonClick}>Gfg color</button>
            </div>
      );
    }
  

• Esta declaración accede a la opción seleccionada desde el elemento seleccionado extrayendo el elemento referenciado actual del DOM, luego obtiene el valor.

  onButtonClick() {
      console.log(this.myRef.current.value);
  }
  

Uso de controles de formulario: cuando el elemento de selección es parte del elemento de formulario, el valor del elemento de selección también se puede obtener mediante el elemento de formulario, utilizando el controlador de eventos adjunto al elemento de selección.

import React, { Component } from "react";
import { Form } from "react-bootstrap";
  
class GeeksForGeeks extends Component {
    onFormSubmit(event) {
        event.preventDefault();
        console.log("Color value is :", this.state.color);
    }
    onChangeColor() {
        this.setState({ color: event.target.value })
    }
    render() {
        return (
            <div>
                Select element of react-bootstrap
                <hr />
                <Form onSubmit=
                    {this.onFormSubmit.bind(this)} role="form">
                    <Form.Group controlId="exampleForm.SelectCustom">
                        <Form.Label>Select Color : </Form.Label>
                        <Form.Control as="select"
                            custom onChange=
                            {this.onChangeColor.bind(this)}>
                            <option value="black">Black</option>
                            <option value="amber">Amber</option>
                            <option value="purple">Purple</option>
                            <option value="magenta">Magenta</option>
                            <option value="white">White</option>
                        </Form.Control>
                    </Form.Group>
                    <Button type="submit">Gfg color</Button>
                </Form>
            </div>
        );
    }
}
export default GeeksForGeeks;

Explicación: Hay dos eventos usados ​​en el formulario:

1. El método this.onSubmitForm() se utiliza para enviar el formulario cuando el usuario hace clic en el botón Enviar.

   onFormSubmit(event) {
       event.preventDefault();
       console.log("Color value is :", this.state.color);
   }
   

2. this.onChangeColor() utilizado para verificar el evento de cambio del elemento seleccionado

   onChangeColor() {
       this.setState({ color: event.target.value })
   }
   

Cuando el usuario cambia el valor del elemento seleccionado, se actualiza al estado del componente.

Este método se usa ampliamente ya que cada elemento del formulario mantiene su estado y, una vez que se envía el formulario, se puede obtener el valor actualizado del estado.

Salida: A continuación se muestra la salida de los ejemplos de código anteriores:

Further Process: Once the user changes the select element value, it is updated to the component state, and the same state value value sends the data to the database for processing.