如何在反应中获取Select Box(这是一个组件)的值?

时间:2016-07-26 08:37:51

标签: javascript reactjs

  

我创建了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>

2 个答案:

答案 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组件中实现它。