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

【问题标题】：onChange function not working in a react component in a erb with react-railsonChange 函数在带有 react-rails 的 erb 中的反应组件中不起作用
【发布时间】：2020-09-17 17:19:31
【问题描述】：

我正在使用带有 react-rails gem 的 rails 5.1.7，在我的一个 erb 视图中使用 react_component() 助手有一个 react 组件我试图使 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 中的状态

【问题讨论】：

您的代码可以正常工作，问题可能是您如何使用 react_component 调用此代码。尝试在您的功能中执行其他操作，例如警报或重定向。我不知道这个 react_component 是如何工作的，但可能是一个限制。

标签： ruby-on-rails reactjs react-rails

【解决方案1】：

组件安装到.erb 的方式可能存在问题。我创建了一个repo 来演示如何在您的项目中正确设置react-rails。要处理搜索/过滤功能，请查看commit。

简而言之，

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

【讨论】：

所以在应用程序的正确布局中添加了 `` 后它终于可以工作了（因为它有一些，我只在 application.html 上添加了它.erb 一）。主要的是控制台没有提示Hello World from Webpacker 消息，一旦我将 javascript_pack_tag 添加到正确的位置，它就会显示

【解决方案2】：

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

【讨论】：

尝试删除 this.handleChange = this.handleChange.bind(this); 因为它看起来有点不必要
没有更改删除this.handleChange = this.handleChange.bind(this);
而不是this.handleChange = this.handleChange.bind(this); 尝试做this.handleChange = event => {console.log('change was made')}
我试过了，但还是不行。我认为这可能与我使用 react_component 帮助程序添加组件并将 prerender 选项设置为 true 的事实有关。 github.com/reactjs/react-rails#view-helper