無法讀取屬性'handleClick'的undefined

我是React的新手，我似乎無法弄清楚這一點。我正在嘗試創建動態標籤頁，當點擊時會顯示標籤頁的內容。在控制檯中出現「無法讀取屬性」handleClick「未定義」錯誤。這是我到目前爲止有：無法讀取屬性'handleClick'的undefined

<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>

來源

2017-05-08 nachomacaso

您是否能夠使用上述方法解決問題？ –

我是謝謝你！ – nachomacaso

如果能解決上述問題，請您將其標記爲答案。這可能會有助於稍後閱讀此線程的人。請確保您將來針對您在堆棧溢出中發佈的問題也做同樣的事情。您可以進行投票，向下投票或將其標記爲答案，具體取決於解決初始問題的有用程度。無論如何，我很高興你做到了。 –

您的應用中存在很多問題。我修復了所有這些，新的App組件應該是這樣的。首先在渲染方法中，您需要調用兩個子組件來渲染使用()的方法。在renderContent函數旁邊，您需要一次傳遞一個content實例，而不是數組。我已經發布了應用程序組件，包含我爲使其在以下工作所做的所有更改。

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))}

希望這會有所幫助。快樂編碼。

來源

2017-05-08 15:40:59

一下添加到應用程序的構造this.renderTab = this.renderTab.bind(this);

你失去應用的this做的渲染方法地圖時，這就是爲什麼它說，它不是一個功能。

來源

2017-05-08 15:28:42 dgrijuela

無法讀取屬性'handleClick'的undefined

回答

相關問題