Как получить необходимое значение из тега <option>в <select> - PullRequest
Новая
       9

Как получить необходимое значение из тега <option>в <select>

0 голосов
/ 14 декабря 2018 
render () {
    return (
      <form onSubmit={(event) => this.forwardValues(event)}>
        <select
          onChange={(event, index) => this.onChangeHandler(event, index)} 
          className='select'> 
          {_.map(this.state.globalDataArray, (item, index) => {
            return <option key={index} value={item}>{item.name}</option>
          })}
        </select>
        <textarea defaultValue='Enter your notations...' />
        <button type='submit'>Save</button>
      </form>
    )
  }
}

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

Выбранная опция может быть найдена с e.options[e.selectedIndex].value.В методе реагирующего компонента вам нужно использовать e.target.

Вот пример.Аналогично вашему коду handleChange вызывается при срабатывании события select onChange. 

class Select extends React.Component {
  
  handleChange(e) {

    // Grab the value from the selected index (option)
    const { value } = e.target.options[e.target.selectedIndex];
    console.log(value);
  }
  
  render() {
    const { options } = this.props;
    return (
      <select onChange={this.handleChange}>
        {options.map((option, i) => {
          return <option key={i} value={option}>{option}</option>
        })}   
      </select>
    )
  }
}

const options = [
  'drink', 'eat', 'dance', 'drive'
];

ReactDOM.render(
  <Select options={options} />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>
0 голосов
/ 14 декабря 2018

Если вы используете React (или любую другую платформу JavaScript в этом отношении), вам действительно следует использовать легкодоступные пакеты NPM, которые были созданы другими разработчиками, чтобы сделать это для вас

Напримересть реагировать-выбрать или реагировать выбрать плюс ;Есть ряд других.В каждом из этих пакетов вы найдете, как создавать select с помощью списков опций и как они решили вопрос обработки изменений выбранного значения.

Короче говоря, не изобретайте колесо заново, если у вас нет абсолютноto.

Кроме того, эти пакеты побуждают вас отображать (и обрабатывать) каждый элемент формы в отдельности, облегчая понимание.

...