React:从 DOM 节点中的 select 字段获取值
React: get value from a select field in a DOM node
我是一名新手后端开发人员,我的任务是修复一项功能,但我被困在反应部分。我似乎找不到合适的语法来从 select 组件获取值,这几乎是我的全部问题。我看过很多其他帖子和反应文档,但我正在尝试的任何事情都没有奏效。标记示例如下(此视图中有很多 select 字段):
<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">
它从那里继续,但 'value="NHDS"' 是我需要的部分,我无法弄清楚如何在我的生活中找到它。如果我可以澄清或改进这个问题,请告诉我。提前致谢。
根据您的示例代码,您似乎正在使用 react-select 组件 https://github.com/JedWatson/react-select。 onChange 将以新的更改值作为其道具触发。在您的情况下,changeField
方法有一个绑定参数 ('program_key'),它将作为函数的第一个参数注入。下一个参数应该是 selected 值。要对此进行测试,您可以在 changeField
函数中执行 console.log(arguments)
,它应该 return 一个包含 '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
我是一名新手后端开发人员,我的任务是修复一项功能,但我被困在反应部分。我似乎找不到合适的语法来从 select 组件获取值,这几乎是我的全部问题。我看过很多其他帖子和反应文档,但我正在尝试的任何事情都没有奏效。标记示例如下(此视图中有很多 select 字段):
<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">
它从那里继续,但 'value="NHDS"' 是我需要的部分,我无法弄清楚如何在我的生活中找到它。如果我可以澄清或改进这个问题,请告诉我。提前致谢。
根据您的示例代码,您似乎正在使用 react-select 组件 https://github.com/JedWatson/react-select。 onChange 将以新的更改值作为其道具触发。在您的情况下,changeField
方法有一个绑定参数 ('program_key'),它将作为函数的第一个参数注入。下一个参数应该是 selected 值。要对此进行测试,您可以在 changeField
函数中执行 console.log(arguments)
,它应该 return 一个包含 '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