CODEWITHSUNDEEP
javascriptreactjs
Raj Rj
Raj Rj

Reputation: 3577

How to get value of Select Box (which is a component) in react js?

I have created SELECT drop down reusable component, which I am using in a form at different page by importing that component. How do i get the value of selection on submit of form?

    import React from 'react';
    export default class Combobox extends React.Component {    
        render() {
            return (

            <div className="combobox-wrapper">
                <select className="form-control">
                {
                    this.props.combolist.map(function(item, i) {
                      return (
                        <option key={i} value={item.name}>{item.name}</option> 
                      ) 
                    })
                  }
                </select>
            </div>
        );
        }

    }

    import React from 'react';
    import Combobox from '../components/Combobox';
    export default class Home extends React.Component {
    submit(event){
            //how to get combobox (Select list) value here
    } 
    render() {
           var comboList = [{name: 'Self'},{name: 'Mother'},
               {name: 'Father'},{name: 'Domestic Partner'}];
            return (
                <div>
                    <div className="col-lg-10 col-md-10 col-sm-10 marginTop20">
                    <form ref="form" onSubmit={this.submit.bind(this)} >
                        <div className="row">
                            <Combobox combolist={comboList} />
                       </div>
        <div className="row">
                            <input type="submit" value="submit"
              className="btn btn-primary" />
                       </div>
    </form>

Upvotes: 0

Views: 1712

Answers (2)

mnsr
mnsr

Reputation: 12437

You need to give your select box a name if you want to reference it using refs.

https://codepen.io/jzmmm/pen/AXaZPp?editors=0011

Your combobox:

<Combobox name="mySelect" combolist={comboList} />

In your select component add the name:

<select name={this.props.name} className="form-control">

Then to get the value, your submit function:

  submit(event){
    event.preventDefault();
    console.log(this.refs.form.mySelect.value)
  }

Upvotes: 2

Rafal Wiliński
Rafal Wiliński

Reputation: 2390

I would suggest adding custom function PropType which will be called every time user select new option.

First, add this to your ComboBox.

ComboBox.propTypes = {
    onOptionChange: React.PropTypes.func.isRequired
}

Then, make option clickable and let it invoke passed function. Change:

<option key={i} value={item.name}>{item.name}</option>

to

<option key={i} value={item.name} onClick={(e) => this.props.onOptionChange(item)>{item.name}</option>

And of course pass function to your ComboBox like this:

<ComboBox combolist={combolist} onOptionChange={this.onOptionChange.bind(this)} />

Now your onOptionChange function containing corresponding item will be invoked every time user click any <option>. (of course you need to implement it in Home component.

Upvotes: 0

Related Questions