CODEWITHSUNDEEP
javascriptreactjs
user922592
user922592

Reputation:

Dealing with "Selected" Option in ReactJS

I have the following code:

<select id="creditCard" ref="card">
 {this.state.cards.map(function(card){
        return(
          <option value={card.ListId}>{card.FullName}</option>
        )
      }, this)}
    </select>

I'm trying to figure out how to grab the selected value from the onClick function but nothing I try seems to work. Any ideas of what i'm missing?

Currently i'm trying this.refs.card.getDOMNode().value but it only gives me the text not the selected options value.

Upvotes: 0

Views: 100

Answers (2)

WiredPrairie
WiredPrairie

Reputation: 59763

You can use refs (documentation) and React.findDOMNode as shown below to access the value as shown here:

var Example = React.createClass({
    render: function() {
        return (
        <div>
           <select ref="peopleList">
            {this.props.people.map(function(person){
                return(<option value={person.id}>{person.name}</option>)
      }, this)}                      
           </select>           
           <button onClick={ this.handleClick }>Selected?</button>
       </div>
    );
  },
  handleClick: function() {
      alert(React.findDOMNode(this.refs.peopleList).value);      
  }
});

var people = [
{
    name: 'john',
    id: 1    
},
{
    name: 'irma',
    id: 2    
},
{
    name: 'rita',
    id: 3   
}
];

React.render(<Example people={ people }/>, document.getElementById('container'));

Upvotes: 0

Jonny Buchanan
Jonny Buchanan

Reputation: 62783

One option is to use onChange on the <select> to grab the current value and do whatever you need to do with it:

handleChange: function(e) {
  var selectedValue = e.target.value
  // ...
},

// ...in render()
<select id="creditCard" onChange={this.handleChange}>

Upvotes: 0

Related Questions