パラメータonClick関数としての値の受け渡し

Question

React JSの学習を開始しましたが、ボタンのIDやタブ値などのパラメータをTab onClickイベントに渡すことができませんでした。私は '未定義'（パラメータとして属性名を渡すとき）までの結果を戻してきました。 注：タグは、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'になるはずです。

どうすればいいですか？

ありがとうございました。

Answer 1

を使用して値を渡すことができ、この場合には、私は問題を発見した - いずれかを行うためにmaterial-uiで必須ですので、あなたはおそらくreact-tab-event-pluginを注入しませんでしたonClick,onChangeなど。また、renderはマテリアル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> 
); 

Answer 2

Heyo、 は、あなたがrefsを使用するか、さらに調べるとthis.handleChange.bind(this, "value")