Как отловить событие onChange?

Question

[Павел Антонов]

Есть select обычный, который стилизуется jquery плагином после рендеринга и превращается в стилизованный ul li список. Проблема в том, что при выборе пункта react не видит событие onChange оно и понятно т.к onChange висит на теге select который после рендера становится display:none и напрямую не кликается. При всем jquery видит что мы кликаем ul li и слышит change select'a.

Помогите как правильно сделать в этой ситуации?
Использовать другой плагин не jquery, а компонент react'a?
Или есть способ показать реакту этот onchange?
Опыта маловато, уже начитался, пробовал dispatchEvent() делать, пробовал что-то с refs мутить, по незнанию кажется что я что-то делаю не так.

Код моего компонента

import React from 'react';
import '../../../js/vendor/jquery.formstyler.js';



export class FormSelect extends React.Component {

	handleChange = () => {
		console.log("123")
	};

	render() {
		return (
			<select ref="test" onChange={this.handleChange} name={this.props.name}>
	          {this.props.options.map(function(option, index){
	            return <option key={index} value={option.value}>{option.text}</option>;
	          })}
			</select>
		);
	}
	componentDidMount(){
		$("select").change(function(){
			console.log("jquery event" + $(this).val());
		})
		$("select[name='"+ this.props.name +"']").styler();
	}
	componentWillUnmount(){
		$("select[name='"+ this.props.name +"']").styler("destroy");
	}
}

По клику на нужный пункт в консоль падает jquery event и value выбранного пункта. А нужно чтобы еще в консоль выводилось 123 из

handleChange = () => {
		console.log("123")
	};

Answer 1

[Антон Спирин]

Решения:
1. Использовать Select плагин адаптированный под React, вместо этого. Лучшее решение, в данном случае. Да и плагинов море.
2. Написать свой компонент-обертку для этого плагина. Костыли еще те.
3. Написать свой Select на React. Хорошее решение, особенно для больших проектов, но требует времени.

Comments

[Павел Антонов]

нашел отличный компонент react-select единственная неприятность сложно стилизовать, но можно :) сижу css переписываю "под себя", зато много опций, колбэков, и прочих плюшек, например можно без труда опции селекта превратить во что угодно, хоть картинки туда пихать.

[Антон Спирин]

Павел Антонов, да для react много всего. Можно и свой написать. Причем, даже без использования тегов select и option, с перехватом события onChange и с имитацией event:

fakeEvent = {
  target: {
    name: 'optionName',
    value: 'optionValue',
  },
};

React тут раскрывает безграничные возможности.