如何在反应中获得下拉标签？

Question

我想从下拉列表中获取下拉列表的标签（例如：库存零件，非库存零件..）下拉列表的代码是

<select value={'ItemType'}  onChange={this.handleChange}  style={{'width':'448px'}}>
                     <option value='0'>Select An Item Type</option>
                     <option value='1'>**Inventory Part**</option>
                     <option value='2'>**Non-Inventory Part**</option> 
                     <option value='3'>Other Change</option>
                     <option value='4'>Subtotal</option>
                     <option value='5'>Group</option> 
                     <option value='6'>Discount</option> 
                     <option value='7'>Payment</option>
                     <option value='8'>Sales Tax Item</option>
                     <option value='9'>Sales Tax Group</option>
                    </select>

handleChange 函数和构造函数如下：

constructor(props){
    super(props);
    this.state={type:''}
  }
handleChange = (e) => {
    this.setState({type:e.target.value});
  };

如何修改我的handleChange以便获得选项的标签？

Answer 1

添加一个包含标签的新状态“标签”

constructor(props){
    super(props);
    this.state={type:'', label: ''}
}      
handleChange = (e) => {
    let index = e.nativeEvent.target.selectedIndex;
    let label = e.nativeEvent.target[index].text;
    let value = e.target.value;
    this.setState({ type: value, label: label});
}

Answer 2

你可以用这个

var index = e.nativeEvent.target.selectedIndex;
var text =e.nativeEvent.target[index].text;
console.log(text);

您的手柄更改方法

handleChange = (e) => {

   var index = e.nativeEvent.target.selectedIndex;
  var text =e.nativeEvent.target[index].text;
console.log(text);
    this.setState({type:e.target.value});

  };

这是它的演示： https: //stackblitz.com/edit/react-ymwpeu