React: get value from a select field in a DOM node

Question

I'm a novice back end developer and I've been tasked with fixing a feature and I'm stuck on the react portion. I can't seem to find the appropriate syntax to get a value from a select component and that's pretty much my whole issue. I've looked at lots of other posts and the react docs and nothing I'm trying is working. An example of markup is as follows(There's lots of select fields in this view):

   <div className="grid-content noscroll medium-6 small-12" style={{overflow: 'visible'}}>
      <div className="grid-content"><label>Program</label></div>
      <div className="grid-content" style={{overflow: 'visible'}}>
         <Select
            key="program_key"
            ref="program_key"
            multi={false}
            value={ jobData && jobData.program_key ? jobData.program_key : null}
            options={programOptions}
            onChange={this.changeField.bind(null, 'program_key')}
          />
      </div>
   </div>

Then the event handler is as follows:

changeField: function(propName) {
  var field = this.refs[propName].getDOMNode();
  console.log(field.input);
  console.log(field);
  var nextProp = field.value.length > 0 ? field.value : null;
  var job = Object.assign({}, this.state.job);
  job.payload.data[propName] = nextProp;

  if(propName === 'user_id') {
    this.changeUserId = true
  }

  this.setState({
    job: job,
    updated: false
  });
}

The result of console.log(field) is:

<div class="Select is-searchable has-value" data-reactid=".0.0.2.0.1.0.1.1.0.1.1.$program_key">
<input type="hidden" value="NHDS" data-reactid=".0.0.2.0.1.0.1.1.0.1.1.$program_key.0">

It goes on from there but the 'value="NHDS"' is the piece that I need and I cannot figure out how to get to it for the life of me. Please let me know if I can clarify or improve this question. Thanks in advance.

score 1 · Accepted Answer · answered Jul 07 '16 at 20:37

Based on your example code it looks like you're using the react-select component https://github.com/JedWatson/react-select. onChange is going to fire with the new changed value as its prop. In your case the changeField method has a bound param ('program_key') that will be injected as the function's first parameter. The next parameter should be the selected value. To test this you can execute console.log(arguments) within the changeField function, it should return an array with 'program_key' and the new value. If that works just add a new param to changeField named newValue and use it where needed.

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind https://github.com/JedWatson/react-select#further-options

React: get value from a select field in a DOM node

1 Answers1