在React中获取Selected选项属性 [英] Get Selected option attribute in React

问题描述

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

I want to get attribute from my select option list.

与此同时，我的代码如下:

In meanwhile my code is like below :

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"定义了选项值.我想检索数据ID"获得不同的输出.有人可以帮我吗?

I have define option value with "index.name" i want to retrieve "data-id" to get different output. Can someone help me in this ?

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

I have updated my code like below. But still i cannot get the data-id or is there any other method i can get my data id without set "value" with "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>
      );
      }

推荐答案

感谢squgeim的建议.

Thanks to squgeim for his suggestion.

我已经弄清楚了如何在一个选定的选项中获得不同的数据. 我已将代码更改为:

I have figured out how can i get different data in one selected option. I have changed my code to :

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".现在，它可以完美运行了！

The problem for my question is i put "index.name" on option "value" attribute instead of put "index.package". Now its working perfectly!

这篇关于在React中获取Selected选项属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！