reactjs - 如何获得下拉标签的 react ?

标签 reactjs redux react-redux

我想从下拉列表中获取下拉列表的标签(例如:库存部分,非库存部分 ..)
下拉列表的代码是

<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以便获得选项的标签?

最佳答案

添加保存标签的新状态“标签”

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

关于reactjs - 如何获得下拉标签的 react ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52833660/

相关文章:

javascript - 使用 React.forwardRef 时在 React/TypeScript 中给 ref 什么类型?

reactjs - 在单击按钮时 react 添加和删除组件

javascript - 使用 Observable.from(<Promise>) 并在 Observable 中捕获错误时如何处理 `UnhandledPromiseRejectionWarning`

design-patterns - Redux 和设计模式

javascript - 使用通用操作和 reducer 简化 redux

javascript - 在使用 redux 的 react 组件中访问 this.props 时未定义

javascript - 当我单击 react native 中的列表项时如何更改文本?

javascript - 将版本号保留到生产中现有的 Redux 存储中

javascript - 使用数字作为 Redux 操作名称

javascript - Ant Design Dropdown - 访问子菜单中的 props 值 [ React ]