2016-07-07 71 views
0

我是新手后端开发人员,我的任务是修复某个功能,并将其卡在反应部分。我似乎无法找到合适的语法从选择组件获取值,这几乎是我的整个问题。我已经看过很多其他帖子和反应文档,但我正在尝试的是正在工作。标记的一个实例是如下(这里有许多选择字段的在此视图中):反应:从DOM节点中的选择字段获取值

<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(场)的结果是:

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

它从那里继续,但“价值=‘NHDS’”为我所需要的部分,我无法弄清楚如何得到它为我的生活。请让我知道,如果我能澄清或改善这个问题。提前致谢。

回答

1

根据您的示例代码,它看起来像您正在使用react-select组件https://github.com/JedWatson/react-select。 onChange将以新改变后的值作为其道具。在你的情况下,changeField方法有一个绑定参数('program_key'),它将作为函数的第一个参数被注入。下一个参数应该是选定的值。要测试此功能,您可以在changeField函数内执行console.log(arguments),它应该返回一个带有'program_key'和新值的数组。如果这样做只需添加一个名为newValuechangeField的新参数并在需要时使用它。

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

+0

谢谢!完全按照你的说法工作。 – brianfr82