传递一个值作为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函数的参数

回答

相关问题