EDITED

Question

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

同时我的代码如下：

＆＃13;

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>
      );

＆＃13;

我用＆＃34; index.name＆＃34;定义了选项值。我想检索＆＃34; data-id＆＃34;获得不同的输出。有人可以帮助我吗？

EDITED

我已经更新了我的代码，如下所示。但是我仍然无法得到数据ID或者是否有任何其他方法我可以获得我的数据ID而没有设置＆＃34;值＆＃34;用＆＃34; id＆＃34;。

＆＃13;

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>
      );
      }

＆＃13;

Answer 1

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

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处理程序。

Answer 2

感谢他对他提出的建议。

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

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”属性而不是put“index.package”上。现在它的工作完美！

在React中获取Selected选项属性

EDITED

2 个答案: