在 React 中获取 Selected 选项属性

IT技术 javascript jquery reactjs react-rails

2021-05-22 10:18:22

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

同时我的代码如下：

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

2个回答

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

感谢 scgeim 的建议。

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

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”上。现在它的工作完美！

其它你可能感兴趣的问题

上一篇对于含有闪光的灯丝，我应该使用什么尺寸的喷嘴？下一篇如何在 React.js 中获取另一个组件的元素？