onChange 函数在带有 react-rails 的 erb 中的 react 组件中不起作用

Question

我正在使用 rails 5.1.7 和 react-rails gem，在我的一个 erb 视图中使用 react_component() helper 我正在尝试使 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

我也尝试过用 <div> 标签替换 React.Fragment 或更改 handleChange

中的状态

Answer 1

在元素上尝试使用 onInput 而不是 onChange 标签，这可能会按照您想要的方式工作。

Answer 2

组件安装到 .erb 上的方式可能存在问题。我创建了一个 repo to demo how to properly set up react-rails in your project. And to handle the search/filter functionality, check out this commit.

简而言之，

确保将正确的组件名称传递给 react_components。在我的例子中，我传递了 App 作为主要成分。参见 here。
确保自动导出所有组件。在这种情况下，使用 react_ujs，如 here 所示。我的组件文件夹名称是 components 这就是我使用 const componentRequireContext = require.context('components', true);

onChange 函数在带有 react-rails 的 erb 中的 react 组件中不起作用

onChange function not working in a react component in a erb with react-rails

ruby-on-rails

reactjs

react-rails