Получение значения выбранной опции html в элементе select с помощью onInput () - PullRequest
Новая
       44

Получение значения выбранной опции html в элементе select с помощью onInput ()

0 голосов
/ 13 июля 2020

Я хочу вызвать событие, когда выбран option в элементе select. Я пробовал использовать onChange(), но он запускает событие при расфокусировке из селектора. Использование onInput() запускает событие в нужное время, но тогда я не могу получить доступ к значению выбранной опции.

Вот мой код с использованием onChange. 

onSelectChange(e: React.ChangeEvent<HTMLSelectElement>) {
    this.setState({ selected: e.target.value  });
}

[...]

<select onChange={e => this.onSelectChange(e)}>

После меняя на onInput (и e:React.FormEvent<HTMLSelectElement>) я получаю ошибки при записи e.target.value.

1 Ответ

0 голосов
/ 13 июля 2020

onChange должно работать; см. фрагмент для сравнения / пример: 

class Example extends React.Component {
  state={
    selected: '',
  }
  
  handleChange = e => {
    console.log("setting selected to " + e.target.value);
    this.setState({selected: e.target.value});
  }
  
  render() {
    return(
      <select value={this.state.selected} onChange={this.handleChange}>
        <option value="grapefruit">Grapefruit</option>
        <option value="lime">Lime</option>
        <option value="coconut">Coconut</option>
        <option value="mango">Mango</option>
      </select>
    )
  }
}


ReactDOM.render(<Example/>, document.getElementById("root"));
<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="root"></div>
...