Question

我开始学习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，则此状态的值应更新为＆＃39; a＆＃39;在另一种情况下，价值应该是＆＃39; b＆＃39;。

我该怎么做？

感谢。

Answer 1

经过进一步检查，我发现了问题 - 您可能没有注入react-tab-event-plugin，因为material-ui需要onClick，{{1}事件火灾等。此外，您的onChange似乎对材料示例不正确。

所以，在你的render comp。中，你应该注入它：

App.js

这个组件非常适合我：

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

Answer 2

Heyo，在这种情况下，您可以使用refs，也可以使用this.handleChange.bind(this, "value")

传递值

将值作为参数onClick函数传递

2 个答案: