将值作为参数传递 onClick 函数答案

【问题标题】：Passing a value as parameter onClick function将值作为参数传递 onClick 函数
【发布时间】：2018-01-11 05:19:15
【问题描述】：

我从学习 React JS 开始，一直坚持将参数（例如按钮 id 或 Tab 值等）传递给 Tab onClick 事件。我得到的结果从“未定义”（将属性名称作为参数传递时）不等。注意：Tag 是 material-ui 库的一个组件。

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，this.state 的值应更新为“a”，否则该值应为“b”。

我该怎么做？

谢谢。

【问题讨论】：

对不起。 **Tab 是 material-ui 库的一个组件。
onClick={() => this.handleChange('b') 有效。

标签： javascript reactjs material-ui

【解决方案1】：

经过进一步检查，我发现了问题 - 你可能没有注入 react-tab-event-plugin，因为 material-ui 需要它来触发任何 onClick、onChange 等事件。此外，您的 render 对于 material-ui 示例似乎不正确。

所以，例如，在您的 App.js comp. 中，您应该像这样注入它：

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

【讨论】：

对不起，我把代码改了写了，但我忘了把字母A去掉。不幸的是，这不是问题，是别的问题..
我更新了答案并解释了问题。希望它现在对你有帮助:)

【解决方案2】：

嘿嘿，在这种情况下，您可以使用 refs 或者您可以使用 this.handleChange.bind(this, "value") 传递值

【讨论】：