Как получить ярлык выпадающего в реакции?

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

Вы можете использовать свойство innerText из целевого объекта nativeEvent события, нет необходимости использовать состояние:

handleChange = (e) => {
  const { innerText } = e.nativeEvent.target
  // innerText will have the label of the selected option
};

Answer 2

, если вы хотите получить только метку выбранной опции, тогда это будет очень просто.

   <option value="Inventory Part">**Inventory Part**</option>

и ваш дескриптор останется прежним.

   let index = e.nativeEvent.target.selectedIndex;
   let label = e.nativeEvent.target[index].text;

Answer 3

Добавление нового состояния 'label', содержащего метку

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 4

Посетите ссылку ниже для раскрывающегося списка с несколькими выборками

https://jedwatson.github.io/react-select/

Answer 5

Вы можете использовать это

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

Answer 6

Лучший способ - генерировать значения выпадающего списка из данных, которые вам нужны:

const itemTypes = {
  "0": "Select An Item Type",
  "1": "Inventory Part",
  "2": "Non-Inventory Part",
  "3": "Other Change",
  "4": "Subtotal",
  "5": "Group",
  "6": "Discount",
  "7": "Payment",
  "8": "Sales Tax Item",
  "9": "Sales Tax Group",
};

class Component extends React.Component {
  // ...

  handleChange = e => {
    const itemTypeId = e.target.value;
    const itemTypeText = itemTypes[itemTypeId];
    console.log(itemTypeText); // Do what you need to with the value here
    this.setState({ type: itemTypeId });
  };

  // ...

  render() {
    return (
      <select
        value="ItemType"
        onChange={this.handleChange}
        style={{ width: "448px" }}
      >
        {Object.keys(itemTypes).map(typeId => (
          <option value={typeId}>{itemTypes[typeId]}</option>
        ))}
      </select>
    );
  }
}