React：从 DOM 节点中的选择字段中获取值答案

【问题标题】：React: get value from a select field in a DOM nodeReact：从 DOM 节点中的选择字段中获取值
【发布时间】：2016-07-07 20:23:11
【问题描述】：

我是一名新手后端开发人员，我的任务是修复一项功能，但我被困在反应部分。我似乎找不到合适的语法来从选择组件中获取值，这几乎是我的全部问题。我查看了许多其他帖子和 react 文档，但我正在尝试的没有任何工作。标记示例如下（此视图中有很多选择字段）：

   <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>

那么事件处理程序如下：

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
  });
}

console.log(field) 的结果是：

<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">

它从那里继续，但 'value="NHDS"' 是我需要的部分，我不知道如何在我的一生中得到它。如果我能澄清或改进这个问题，请告诉我。提前致谢。

【问题讨论】：

标签： javascript reactjs jsx react-dom

【解决方案1】：

根据您的示例代码，您似乎正在使用 react-select 组件https://github.com/JedWatson/react-select。 onChange 将以新的更改值作为其属性触发。在您的情况下，changeField 方法有一个绑定参数（'program_key'），它将作为函数的第一个参数注入。下一个参数应该是选定的值。要对此进行测试，您可以在changeField 函数中执行console.log(arguments)，它应该返回一个带有“program_key”和新值的数组。如果可行，只需向 changeField 添加一个名为 newValue 的新参数并在需要时使用它。

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

【讨论】：