How to get select element's value in react-bootstrap?

it's quite simple:

on the render method you should keep an eye on the bind(this)

<select onChange={this.yourChangeHandler.bind(this)}>
  <option value="-1" disabled>--</option>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

and your handler is like:

yourChangeHandler(event){
  alert(event.target.value)
}

Make a function handleChange(). Then, put it in your render() like this:

<Input type="select" value="1" ref="valid_for" onChange={this.handleChange}>

And the function in the component:

handleChange: function(e) {
  var val = e.target.value;
},

"react": "^15.0.2",
"react-bootstrap": "^0.29.3",
"react-dom": "^15.0.2",

under the env, ReactDOM.findDOMNode() works for me.

in render():

<FormControl name="username" ref="username"/>

in handler():

const username = findDOMNode(this.refs.username);

None of the above worked for me. I actually had to go through the DOM hierarchy to come up with a way to extract the value. PS: I did not use ReactBootstrap.ListGroup in my code. Just the Input from React Bootstrap. Here is my code (ES6+).

import ReactDOM from 'react-dom';

getValueFromSelect(ref){
    var divDOMNode = ReactDOM.findDOMNode(ref);
    /* the children in my case were a label and the select itself. 
       lastChild would point to the select child node*/
    var selectNode = divDOMNode.lastChild;
    return selectNode.options[selectNode.selectedIndex].text;
}

Dependencies:

    "react": "^0.14.3",
    "react-bootstrap": "0.28.1",
    "react-dom": "^0.14.3",

Refs as strings are considered legacy and may be deprecated. But it seems as if react-bootstrap components won't work with callback refs. I was working on this today to handle a search input.

class SearchBox extends Component {
  constructor(props, context) {
    super(props, context);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.props.updateQuery(this._query.value);
  }

  render() {
    // ...
    <FormControl
      onChange={this.handleChange}
      ref={(c) => this._query = c} // should work but doesn't
      value={this.props.query}
      type="text"
      placeholder="Search" />
    // ...
  }
}

I wound up grabbing the change event and getting the value from it. This doesn't feel the "React way" or very current, but it works.

class SearchBox extends Component {
  constructor(props, context) {
    super(props, context);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.updateQuery(e.target.value);
  }

  render() {
    // ...
    <FormControl
      onChange={this.handleChange}
      value={this.props.query}
      type="text"
      placeholder="Search" />
    // ...
  }
}

There is yet another easy way! if you use <FormGroup> component and set the controlId props, the inner DOM (<input>, ...) will get that controlId as its id attribute. for example:

<FormGroup controlId="myInputID">
  <ControlLabel>Text</ControlLabel>
  <FormControl type="text" placeholder="Enter text" />
</FormGroup>

Then you will have the value by calling document.getElementById:

var myInputValue = document.getElementById("myInputID").value;

If you are here like me using the latest FormControl component here's a solution I did:

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class Blah extends Component {
    getSelectValue = () => {
        /* Here's the key solution */
        console.log(ReactDOM.findDOMNode(this.select).value)
    }

    render() {
        return
        <div> 
            <FormControl
            ref={select => { this.select = select }}
            componentClass="select"
            disabled={this.state.added}
            >
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </FormControl>
            <Button onclick={this.getSelectValue}>
                Get Select value
            </Button>
        </div>
    }
}

1. Event Handler should be as below:

const changeLanguage = (event: any)=> {
  console.log('Selected Index : ', event.target.selectedIndex);
}

2. JSX should contain following:

<Form.Control as="select" onChange={(event)=>{changeLanguage(event)}}>                
  <option>English</option>
  <option>Marathi</option>
</Form.Control>

Note: This solution works with function components. For class components we need to change the syntax accordingly.

𝗘𝘀𝘁𝗮𝘀 𝘀𝗼𝗻 𝘁𝗿𝗲𝘀 𝗳𝗼𝗿𝗺𝗮𝘀 𝗱𝗲 𝗮𝗯𝘀𝘁𝗿𝗮𝗲𝗿 𝘃𝗮𝗹𝗼𝗿𝗲𝘀 𝗱𝗲 𝗶𝗻𝗽𝘂𝘁𝘀 𝗲𝗻 𝘂𝗻 𝗳𝗼𝗿𝗺𝘂𝗹𝗮𝗿𝗶𝗼 𝗱𝗲 𝗥𝗲𝗮𝗰𝘁 𝗕𝗼𝗼𝘁𝘀𝘁𝗿𝗮𝗽:

Teniendo en cuenta que en la actualidad existe uso obsoleto de getDOMNode() y uso obsoleto de findDOMNode()

import * as React from 'react'
import Form from 'react-bootstrap/Form'

𝟭. 𝗰𝗼𝗻𝘁𝗿𝗼𝗹𝗜𝗱 & 𝗴𝗲𝘁𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝗕𝘆𝗜𝗱

const Componente1 = (props) => {
    let clave = document.getElementById('formSignupPassword').value
    console.log(clave)
    return (
        <>
            <Form>
                <Form.Group className="mb-2" controlId="formSignupPassword">
                    <Form.Label className="mb-0">Contraseña</Form.Label>
                    <Form.Control
                        type="password"
                        placeholder="Registre una clave"
                    />
                </Form.Group>
            </Form>
        </>
    )
}

𝟮. 𝗿𝗲𝗳 & 𝗥𝗲𝗮𝗰𝘁.𝗰𝗿𝗲𝗮𝘁𝗲𝗥𝗲𝗳

const Componente2 = (props) => {
    let passwordText = React.createRef()
    let clave = passwordText.current.value
    console.log(clave)
    return (
        <>
            <Form>
                <Form.Group className="mb-2" controlId="formSignupPassword">
                    <Form.Label className="mb-0">Contraseña</Form.Label>
                    <Form.Control
                        type="password"
                        placeholder="Registre una clave"
                        inputRef={passwordText}
                        // or Use
                        ref={passwordText}
                    />
                </Form.Group>
            </Form>
        </>
    )
}

𝟯. 𝗼𝗻𝗖𝗵𝗮𝗻𝗴𝗲={(𝗲) =>} & 𝗛𝗼𝗼𝗸𝘀 𝗥𝗲𝗮𝗰𝘁.𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲

const Componente3 = (props) => {
    const [userEmail, setEmail] = React.useState(null)
    console.log(userEmail)
    return (
        <>
            <Form>
                <Form.Group className="mb-2" controlId="formSignupEmail">
                    <Form.Label className="mb-0">Email</Form.Label>
                    <Form.Control
                        type="email"
                        placeholder="Registre una cuenta de email valida"
                        onChange={(e) => setEmail(e.target.value)}
                    />
                </Form.Group>
            </Form>
        </>
    )
}