如何解决onChange函数不适用于带有react-rails的erb中的react组件
我正在将rails 5.1.7与react-rails gem一起使用,在我的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
我还尝试用React.Fragment
标签替换<div>
或更改handleChange
中的状态
解决方法
在元素上尝试使用onInput
代替onChange
标签,这可能会按照您想要的方式工作。
将组件安装到.erb
上的方式可能有问题。我创建了一个repo来演示如何在您的项目中正确设置react-rails
。要处理搜索/过滤器功能,请查看此commit。
简而言之,
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。