Событие OnChange с использованием React JS для раскрывающегося списка

Ответ 1

Событие изменения инициируется элементом <select>, а не элементом <option>. Однако это не единственная проблема. То, как вы определили функцию change, не приведет к перерегистрации компонента. Кажется, что вы, возможно, еще не полностью поняли концепцию React, так что, возможно, "Мышление в реале" .

Вы должны сохранить выбранное значение как состояние и обновить состояние при изменении значения. Обновление состояния приведет к перезагрузке компонента.

var MySelect = React.createClass({
     getInitialState: function() {
         return {
             value: 'select'
         }
     },
     change: function(event){
         this.setState({value: event.target.value});
     },
     render: function(){
        return(
           <div>
               <select id="lang" onChange={this.change} value={this.state.value}>
                  <option value="select">Select</option>
                  <option value="Java">Java</option>
                  <option value="C++">C++</option>
               </select>
               <p></p>
               <p>{this.state.value}</p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

Также обратите внимание, что элементы <p> не имеют атрибута value. React/JSX просто реплицирует хорошо известный синтаксис HTML, он не вводит пользовательские атрибуты (за исключением key и ref). Если вы хотите, чтобы выбранное значение являлось содержимым элемента <p>, а затем просто помещалось внутри него, как и в случае любого статического содержимого.

Подробнее о средствах управления событиями, состояния и формы:

• http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
• http://facebook.github.io/react/docs/forms.html

Ответ 2

import React, { PureComponent, Fragment } from 'react';
import ReactDOM from 'react-dom';

class Select extends PureComponent {
  state = {
    options: [
      {
        name: 'Select…',
        value: null,
      },
      {
        name: 'A',
        value: 'a',
      },
      {
        name: 'B',
        value: 'b',
      },
      {
        name: 'C',
        value: 'c',
      },
    ],
    value: '?',
  };

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    const { options, value } = this.state;

    return (
      <Fragment>
        <select onChange={this.handleChange} value={value}>
          {options.map(item => (
            <option key={item.value} value={item.value}>
              {item.name}
            </option>
          ))}
        </select>
        <h1>Favorite letter: {value}</h1>
      </Fragment>
    );
  }
}

ReactDOM.render(<Select />, window.document.body);

Ответ 3

Спасибо Феликсу Клингу, но его ответ нуждается в небольшом изменении:

var MySelect = React.createClass({
 getInitialState: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     this.setState({value: event.target.value});
 },
 render: function(){
    return(
       <div>
           <select id="lang" onChange={this.change.bind(this)} value={this.state.value}>
              <option value="select">Select</option>
              <option value="Java">Java</option>
              <option value="C++">C++</option>
           </select>
           <p></p>
           <p>{this.state.value}</p>
       </div>
    );
 }
});
React.render(<MySelect />, document.body); 

Ответ 4

Реактивные крючки (16. 8+):

const Dropdown = ({
  options
}) => {
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => setSelectedOption(e.target.value)}>
        {options.map(o => (
          <option value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};