我创建了SELECT下拉可重用组件,我通过导入该组件在不同页面的表单中使用它。如何在提交表格时获得选择的价值?
import React from 'react';
export default class Combobox extends React.Component {
render() {
return (
<div className="combobox-wrapper">
<select className="form-control">
{
this.props.combolist.map(function(item, i) {
return (
<option key={i} value={item.name}>{item.name}</option>
)
})
}
</select>
</div>
);
}
}
import React from 'react';
import Combobox from '../components/Combobox';
export default class Home extends React.Component {
submit(event){
//how to get combobox (Select list) value here
}
render() {
var comboList = [{name: 'Self'},{name: 'Mother'},
{name: 'Father'},{name: 'Domestic Partner'}];
return (
<div>
<div className="col-lg-10 col-md-10 col-sm-10 marginTop20">
<form ref="form" onSubmit={this.submit.bind(this)} >
<div className="row">
<Combobox combolist={comboList} />
</div>
<div className="row">
<input type="submit" value="submit"
className="btn btn-primary" />
</div>
</form>
答案 0 :(得分:2)
如果您想使用refs引用它,您需要为您的选择框命名。
https://codepen.io/jzmmm/pen/AXaZPp?editors=0011
你的组合框:
<Combobox name="mySelect" combolist={comboList} />
在您的选择组件中添加名称:
<select name={this.props.name} className="form-control">
然后获取值,提交函数:
submit(event){
event.preventDefault();
console.log(this.refs.form.mySelect.value)
}
答案 1 :(得分:0)
我建议添加自定义函数PropType,每次用户选择新选项时都会调用它。
首先,将其添加到您的ComboBox。
ComboBox.propTypes = {
onOptionChange: React.PropTypes.func.isRequired
}
然后,使option
可单击并让它调用传递的函数。变化:
<option key={i} value={item.name}>{item.name}</option>
到
<option key={i} value={item.name} onClick={(e) => this.props.onOptionChange(item)>{item.name}</option>
当然,将功能传递给ComboBox
,如下所示:
<ComboBox combolist={combolist} onOptionChange={this.onOptionChange.bind(this)} />
现在,每次用户点击任意onOptionChange
时,都会调用包含相应项目的<option>
函数。 (当然,您需要在Home
组件中实现它。