【问题标题】：Get Selected option attribute in React在 React 中获取 Selected 选项属性
【发布时间】：2017-04-05 05:29:47
【问题描述】：

我想从我的选择选项列表中获取属性。

同时我的代码如下：

var Billing = React.createClass({
    getInitialState() {
    return {
        associations: [],
        value: '',
        associationsList: '1'
    };
  },
   handleChange(event) {  
    this.setState({value: event.target.value});
  },
  handleOption(event){
    var option =  event.target.getAttribute('data-id');
    this.setState({associationsList: option});
  },
  render() {
    var listAssociations = this.state.associations.map(function(index){
        return (
            <option onChange={this.handleOption} value={index.name} data-id={index.id} ref={index.name} key={index.id}>{index.name}</option>
        )
    });

    var BillingInfo
    {
      if(this.state.associationsList == "0")
      {
        return (   
        <div>
        <Tabs selected={0}>
          <Pane label="Billing Info">
            <div className="row">
                <div className="small-12">
                    Associations:
                    <select value={this.state.value} onChange={this.handleChange}>
                    {listAssociations}
                    </select>
                </div>
            </div>
            <div>
            {this.state.value}<br/>
            {this.state.associationsList}
            Basic package
            </div>
          </Pane>
          <Pane label="Billing History">
            <div>Billing history</div>
          </Pane>
        </Tabs>
      </div>
      );

我已经用“index.name”定义了选项值，我想检索“data-id”以获得不同的输出。有人可以帮我吗？

已编辑

我已经更新了我的代码，如下所示。但我仍然无法获取数据 ID，或者是否有任何其他方法可以在不使用“id”设置“值”的情况下获取我的数据 ID。

handleChange(event) {  
    var index = event.target.selectedIndex;
    var optionElement = event.target.childNodes[index]
    var option =  optionElement.getAttribute('data-id');
    this.setState({
    associationsList: option,
    value: event.target.value
    });
  },
   render() {
    var listAssociations = this.state.associations.map(function(index){
        return (
            <option value={index.name} data-id={index.id} ref={index.name} key={index.id}>{index.name}</option>
        )
    });

    var BillingInfo
    {
      if(this.state.associationsList == "0")
      {
        return (   
        <div>
        <Tabs selected={0}>
          <Pane label="Billing Info">
            <div className="row">
                <div className="small-12">
                    Associations:
                    <select value={this.state.value} onChange={this.handleChange}>
                    {listAssociations}
                    </select>
                </div>
            </div>
            <div>
            {this.state.value}<br/>
            {this.state.associationsList}
            Basic package
            </div>
          </Pane>
          <Pane label="Billing History">
            <div>Billing history</div>
          </Pane>
        </Tabs>
      </div>
      );
      }

【问题讨论】：

标签： javascript jquery reactjs react-rails

【解决方案1】：

可以在select的onChange事件中获取当前选中的option元素的索引：

handleChange(e) {
  var index = e.target.selectedIndex;
  var optionElement = e.target.childNodes[index]
  var option =  optionElement.getAttribute('data-id');
  this.setState({
    associationsList: option,
    value: event.target.value
  });
}

这意味着在 option 元素 (handleOption) 中不需要有 onChange 处理程序。

【讨论】：

谢谢，我已经删除了 handleOption 处理程序。但我仍然无法获得“数据 ID”。

【解决方案2】：

感谢 squageim 的建议。

我已经弄清楚如何在一个选定的选项中获取不同的数据。我已将代码更改为：

var listAssociations = this.state.associations.map(function(index){
        return (
            <option value={index.package} data-id={index.id} ref={index.name} key={index.id}>{index.name}</option>
        )
    });
    
var BillingInfo
    {
      if(this.state.value == "0")
      {
        return (   
        <div>
        <Tabs selected={0}>
          <Pane label="Billing Info">
            <div className="row">
                <div className="small-12">
                    Associations:
                    <select value={this.state.package} onChange={this.handleChange}>
                    {listAssociations}
                    </select>
                </div>
            </div>
            <div>
            Package={this.state.value}<br/>
            ID={this.state.associationsList}<br/>
            <h3> Recober Package </h3>
            You are currently <b>Small Association</b>. If you have more than 7 members, you may<br/>
            <b>upgrade</b> your package to Growing Association.
            </div>
          </Pane>

我的问题是我将“index.name”放在选项“value”属性上，而不是放在“index.package”上。现在它完美地工作了！

【讨论】：