我将 filterText=this.state.filterText
传递给子表,以仅过滤包含我在搜索器中输入的字母的影片。
在Table
组件内,我创建了函数CheckIfFiltered
来过滤电影并检查表格是否包含“filterText”。
问题是当我尝试运行它时出现错误:
"Uncaught TypeError: Cannot read property 'filterText' of undefined"
尽管我已将 filterText
传递给了 props,传递给了 Table 组件。请帮我解决这个问题。
var Row = React.createClass({
render: function(){
return(
<tr>
<td>{this.props.episode.title}</td>
<td><a href ="top">Link</a></td>
</tr>
);
}
});
var Table = React.createClass({
render: function(){
var CheckIfFiltered=function (episode, index, ar){
if (episode.title.toLowerCase().indexOf(this.props.filterText.toLowerCase()) > -1){
return true;
}
else {
return false;
}
}
var filter_rows = this.props.episodes.filter(CheckIfFiltered).map(function(episode){
return <Row episode={episode} key={episode.title} /> ;
});
return(
<div className="row spacer">
<div className="col-lg-4 col-lg-offset-4">
<table width="100%">
<tbody>{filter_rows}</tbody>
</table>
</div>
</div>
);
}
});
var Search = React.createClass({
changeFilteringSearch: function(){
this.props.changeFiltering(
this.refs.filterTextInput.value
);
},
render: function(){
return (
<div className="row ">
<div className="col-lg-4 col-lg-offset-4">
<input type="search" className="form-control" value = {this.props.filterText} ref="filterTextInput" onChange={this.changeFilteringSearch} className="form-control" placeholder="Search for episode" />
</div>
</div>
);
}
});
var FilterableEpisodesTable = React.createClass({
getInitialState: function() {
return {
filterText: 'qwerty'
};
},
changeFiltering: function(text){
this.setState({
filterText: text
});
},
render: function(){
return(
episodes=this.props.episodes,
<div>
<Search filterText={this.state.filterText} changeFiltering={this.changeFiltering}/>
<hr/>
<Table episodes={episodes} filterText={this.state.filterText}/>
</div>
);
}
});
var episodes = [{title : "Angular with Yeoman",},
{title : "Using D3 with Rickshaw and Angular",},
{title : "Canvas with paper.js",},
{title : "Express.js middleware",},
{title : "Metro",}
];
ReactDOM.render(
<FilterableEpisodesTable episodes = {episodes}/>,
document.getElementById('example')
);
最佳答案
CheckIfFiltered
在您将其传递给过滤器时在不同的上下文中运行,因此只需绑定(bind)它即可。
或者
var CheckIfFiltered=function( episode ){
if (episode.title.toLowerCase().indexOf(this.props.filterText.toLowerCase()) > -1){
return true;
} else {
return false;
}
}.bind( this )
或
var filter_rows = this.props.episodes.filter(CheckIfFiltered.bind( this )).map( ... )
应该可以帮助您正确确定范围。或者将其添加为类方法,我认为 React.createClass
自动绑定(bind)功能,但请注意,如果您更改为 ES2015 语法,则永远不会自动绑定(bind)的 JS native 行为将发生,因此您必须自己绑定(bind)它.
React.createClass({
CheckIfFiltered: function( episode, index, ar ){
return episode.title.toLowerCase().indexOf(this.props.filterText.toLowerCase()) > -1 ? true : false
},
render: function() { ... }
})
关于javascript - 未捕获的类型错误 : Cannot read property 'filterText' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34238835/