开发者问题收集

无法读取未定义的属性“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