Блог

Я использую rails 5.1.7 с драгоценным камнем react-rails, имея компонент react в одном из моих представлений erb с помощью помощника react_component(). Я пытаюсь заставить событие onChange работать, но функция никак не реагирует. Я должен иметь возможность просматривать журнал консоли, но я его не вижу.

 import React from "react"
import PropTypes from "prop-types"


class CardList extends React.Component {

  constructor(props) {
    super(props);
    
    this.state = {
      all_cards: this.props.all_cards,
      orderBy: 'all',
    };

    this.handleChange = this.handleChange.bind(this);

  }

  handleChange(event) {
    console.log('change was made');
  }

  render () {

    const allData = this.state.all_cards.map((card, index) => (
          <div className="col-md-12">
            { card.category }
         </div>
    ));

    return (
      <React.Fragment>

        <label for="order">Order</label>

        <select onChange={this.handleChange} name="order" id="order_filter">
          <option value="element1">element1</option>
          <option value="element2">element2</option>
        </select>

        {allData}

      </React.Fragment>
    );
  }
}

CardList.propTypes = {
  all_cards: PropTypes.array
};

export default CardList
  

Компонент вызывается, на мой взгляд, как:

 <%= react_component("cardlist", { all_cards: @all_cards }, {prerender: true}) %>

  

Если я попытаюсь добавить следующее к serverRendering.js файл:

 ReactRailsUJS.mountComponents()
  

Я получаю эту ошибку на странице, которую должен монтировать компонент:

 ExecJS::ProgramError in Cards#index
ReferenceError: document is not defined
  

Я также пытался React.Fragment заменить <div> тегом или изменить состояние в handleChange

Это может быть проблема с тем, как компоненты монтируются на .erb . Я создал репозиторий, чтобы продемонстрировать, как правильно настроить react-rails ваш проект. И чтобы справиться с функциональностью поиска / фильтрации, ознакомьтесь с этим коммитом .

В двух словах,

1. Убедитесь, что вы передаете правильное имя компонента react_components . В моем случае я прошел App в качестве основного компонента. Смотрите здесь .
2. Убедитесь, что все компоненты экспортируются автоматически. В этом случае используйте react_ujs , как показано здесь . Мое имя папки компонентов components — вот почему я использую const componentRequireContext = require.context('components', true);

в элементе попробуйте использовать onInput вместо onChange тега, это может работать так, как вы хотите.