freislot
@freislot
Frontend-разработчик

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

Есть 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")
	};
  • Вопрос задан
  • 353 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Решения:
1. Использовать Select плагин адаптированный под React, вместо этого. Лучшее решение, в данном случае. Да и плагинов море.
2. Написать свой компонент-обертку для этого плагина. Костыли еще те.
3. Написать свой Select на React. Хорошее решение, особенно для больших проектов, но требует времени.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы