无法读取未定义的属性“handleClick”
2017-05-08
7851
我是 React 新手,似乎无法弄清楚这一点。我正在尝试创建动态选项卡,单击时将显示选项卡的内容。我在控制台中收到“无法读取未定义的属性‘handleClick’”错误。以下是我目前得到的结果:
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
tabs: [
{id: 0, name: 'Foo'},
{id: 1, name: 'Bar'},
{id: 2, name: 'Fizz'}
],
contents: [
{name: 'Foo', content: 'Hello'},
{name: 'Bar', content: 'World'},
{name: 'Fizz', content: 'Buzz'},
]
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Hi');
}
renderTab(tab) {
return(<Tab key={tab.id}
value={tab.name}
onClick={() => this.handleClick()}
/>
);
}
renderContent(i) {
return(<Content content={this.state.contents}/> );
}
render() {
return(
<div className="container-tabs">
<div className="tab">
{this.state.tabs.map(this.renderTab)}
</div>
<div className="tabcontent">
<p>{this.renderContent}</p>
</div>
</div>
) ;
}
}
class Tab extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<button className="tablinks"
onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
}
class Content extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="tabcontent">
{this.props.content}
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
</script>
2个回答
您的应用中存在许多问题。我已修复所有问题,新的 App 组件应如下所示。首先,在渲染方法中,您需要使用
()
调用两个子组件渲染方法。在
renderContent
函数旁边,您需要一次传递一个
content
实例,而不是数组。我已将 App 组件以及我为使其正常工作而进行的所有更改发布在下面。
import React, { Component } from 'react';
import Tab from './tab';
import Content from './content';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
tabs: [
{id: 0, name: 'Foo'},
{id: 1, name: 'Bar'},
{id: 2, name: 'Fizz'}
],
contents: [
{name: 'Foo', content: 'Hello'},
{name: 'Bar', content: 'World'},
{name: 'Fizz', content: 'Buzz'},
]
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Hi');
}
renderTab(tab) {
return(<Tab {...tab}
onClick={this.handleClick}
/>
);
}
renderContent(content) {
console.log(this.state.contents);
return(<Content {...content}/> );
}
render() {
return(
<div className="container-tabs">
<div className="tab">
{this.state.tabs.map(tab => this.renderTab(tab))}
</div>
<div className="tabcontent">
<p>{this.state.contents.map(content => this.renderContent(content))}</p>
</div>
</div>
) ;
}
}
最后,调用
rendertab
函数应如下所示。您没有正确使用映射数组助手。
{this.state.tabs.map(tab => this.renderTab(tab))}
希望这能有所帮助。祝您编码愉快。
Ravindra Ranwala
2017-05-08
将其添加到 App 的构造函数中
this.renderTab = this.renderTab.bind(this);
在渲染方法中执行地图时,您将丢失 App 的
this
,这就是为什么它说它不是一个函数。
dgrijuela
2017-05-08