Как получить значение выпадающего меню в ReactJS

Question

Я пытаюсь получить значение выпадающего меню, которое выглядит следующим образом:

<ul className="tabs" data-component={true}>
    <li>
      <section className="sort-list" data-component={true}>
         <select value={0} className="sort" data-element={true}>
           <option key="0" value="0">Any Topic</option>
           <option key="1" value="1">Art</option>
           <option key="2" value="2">Auto</option>
      //...and so on

Я видел похожие вопросы, но попытка alert(sort).value не сработает (вместе с некоторымидругие варианты), так что я думаю, что мне нужно связать воедино мои селекторы?

Я могу использовать либо значение, либо текст, так как цель состоит в том, чтобы фильтр применялся, даже когда пользователь возвращается на предыдущую страницу.

Как получить ключ, значение или текст параметров?

Answer 1

Вам нужно добавить событие onchage к вашему выбору.

change = (event) => {
  this.setState({
    topic: event.target.value
  })
}

<select onChange={this.change} value={0} className="sort" data-element={true}
  <option key="0" value="0">Any Topic</option>
  <option key="1" value="1">Art</option>
  <option key="2" value="3">Auto</option>
</select>

DEMO

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">


class App extends React.Component {
  constructor() {
    super();
    this.state = {
      topic: ''
    };
  }

  change = (event) => {
    this.setState({
      topic: event.target.value
    })
  }

  render() {
    return (
      <div>
        
        <p>
          Selected topic: {this.state.topic}
        </p>
         <select onChange={this.change} className="sort" data-element={true}>
           <option key="0" value="0">Any Topic</option>
           <option key="1" value="1">Art</option>
           <option key="2" value="2">Auto</option>
           </select>
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>

Answer 2

Добавить свойство onChange к элементу.Вот простой фрагмент кода для рабочего примера.

import React, { useState } from 'react';
import { oneOfType, string, number } from 'prop-types';

function MyDropdown({ selected: preSelected }) {
  const [selected, setSelected] = useState(preSelected);

  const onChange = evt => {
    setSelected(evt.target.value);
  }
  return (
    <div>
      <select onChange={onChange} value={selected}>
        <option value={1}>Opption 1</option>
        <option value={2}>Opption 2</option>
        <option value={3}>Opption 3</option>
      </select>
      {selected && <div>Selcted: {selected}</div>}
    </div>
  )
}

MyDropdown.propTypes = {
  selected: oneOfType([string,  number])
};

MyDropdown.defaultProps = 
  selected: 1
};

Вы также можете проверить его в реальном времени на CodeSandbox: https://codesandbox.io/s/react-codesandbox-2voc6

Answer 3

Способ Reactjs состоит в том, чтобы иметь компонент select box, который имеет обработчик onChange.Как то так:

class MySelect extends React.Component {
    onChange = (val) => {
      // save the val somewhere..
      this.setState({currentVal: val})
    }
    render() {
        return <select onChange={this.onChange}> { getOptions() } </select>
    }
}