傳遞一個值作爲onClick函數的參數

-3

我已經開始學習React JS，並且我一直在向Tab onClick事件傳遞參數（例如按鈕ID或Tab值等）。我一直在從'未定義'（當傳遞屬性名稱作爲參數時）返回結果。注意：標記是material-ui庫的一個組件。傳遞一個值作爲onClick函數的參數

constructor(props){ 
    super(props); 
    this.state = { value : 'a'}; 
    this.handleChange = this.handleChange.bind(this); 
} 

handleChange(event){ 
    console.log(event.target.value); //it prints undefined 
    this.setState({value: event.target.value}); 
} 

<Tabs value={this.state.value}> 

    <Tab label="Tab A" value="a" onClick={this.handleChange}> 
     <div> 
     <h2>Controllable Tab A</h2> 
     <p>TAB A 
     </p> 
     </div> 
    </Tab> 

    <Tab label="Tab B" value="b" onClick={this.handleChange}> 
     <div> 
     <h2>Controllable Tab B</h2> 
     <p>TAB B</p> 
     </div> 
    </Tab> 
</Tabs>

我嘗試創建一個選項卡菜單，但我無法實現將Tab的值傳遞給handleChange函數。我的目標是，如果用戶單擊選項卡A，則在另一種情況下，該值應該更新爲'a'，值應該爲'b'。

我該怎麼做？

謝謝。

來源

2017-08-03 Selin Gök

遺憾。 ** Tab是material-ui庫的一個組件。 –

onClick = {（）=> this.handleChange（'b'）有效。 –

經進一步檢查的價值，我發現這個問題 - 你可能因爲它是需要通過material-ui作出任何沒有注入react-tab-event-pluginonClick，onChange等事件發生。另外，您的render對material-ui示例看起來不正確。。

所以，F.E.，在你App.js補償，你應該注入它想：

import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin();

此組件完美的作品對我來說：

state = { 
    activeTab: 'a' 
}; 

handleChange = (activeTab) => { 
    this.setState({ activeTab}); 
}; 

render =() => (
    <Tabs 
     value={this.state.activeTab} 
     onChange={this.handleChange} 
    > 
     <Tab label="Tab A" value="a"> 
      <div> 
       <h2>Controllable Tab A</h2> 
       <p> 
        Tabs are also controllable if you want to programmatically pass them their values. 
        This allows for more functionality in Tabs such as not 
        having any Tab selected or assigning them different values. 
       </p> 
      </div> 
     </Tab> 
     <Tab label="Tab B" value="b"> 
      <div> 
       <h2>Controllable Tab B</h2> 
       <p> 
        This is another example of a controllable tab. Remember, if you 
        use controllable Tabs, you need to give all of your tabs values or else 
        you wont be able to select them. 
       </p> 
      </div> 
     </Tab> 
    </Tabs> 
);

來源

2017-08-03 14:28:25 Denialos

對不起，我更改了代碼並寫下了代碼，但我忘記刪除了字母A.不幸的是，這不是問題，這是其他問題。 –

我更新了我的答案並解釋了問題。希望它現在可以幫助你:) – Denialos

Heyo，在這種情況下，你可以使用refs或者您可以通過使用this.handleChange.bind(this, "value")

來源

2017-08-03 14:27:03

傳遞一個值作爲onClick函數的參數

回答

相關問題