Material UIダイアログボックスを呼び出すonClickハンドラが正常に動作しない

Question

ボタンをクリックすると常にmaterial-uiダイアログボックスがポップアップし、常に目標値が完全に表示されます。それはときどき示すが時々そうではない。私はicon onclickイベントの値を送信しています - （e）そしてonClick関数でそれを使用しています。私はreact.jsでやっています。コンポーネントにバグはありますか？

私は、ダイアログコンポーネントの問題ではないことを知りました。 console.logopenFuncの値を取得できません。アイコンをタップしています。

同じ問題がありましたか？どんな助け？

次のコードを持って：あなたが使用してのonClick関数に値を渡すことができ

import React, {Component} from 'react'; 
import Dialog from 'material-ui/Dialog'; 
import BorderColor from 'material-ui/svg-icons/editor/border-color'; 

class Mydialog extends Component { 
    constructor() { 
     super(); 
     this.state = { 
     ids:['129', '105', '131', '151'], 
     myid: '', 
     open_dialog: false 
     } 
     this.openFunc = this.openFunc.bind(this); 
    } 
    check_today() { 
     let container = []; 
     let i; 

     for(i=0; i<this.state.ids.length;i++) { 
     container.push(
       <BorderColor onClick = {this.openFunc} data-id ={this.state.ids[i]}/> 
     ) 
     } 

     if(container.length === 0){ 
     return(
      <div>show none!</div> 
      ) 
     } 
     else{ 
     return (
      <table> 
      <tr> 
       {container} 
      </tr> 
      </table> 
     ) 
     } 
    } 
    openFunc(e) { 
     console.log(e.target.dataset.id); 
     this.setState({ 
     open_dialog: true, 
     myid: e.target.dataset.id 
     }); 
    } 
    handleClose =() => { 
     this.setState({open_dialog: false}); 
    }; 
    render() { 
     return(
     <div> 
      <div> 
      {this.check_today()} 
      </div> 
      <Dialog 
      autoDetectWindowHeight={true} 
      modal={false} 
      open={this.state.open_dialog} 
      onRequestClose={this.handleClose} 
      > 
      <div> 
      It's the dialog-box! 
      My id is {this.state.myid} 
      </div> 
      </Dialog> 
     </div> 
    ) 
    } 
} 
export default Mydialog 

Answer 1

を代わりの値をdata-idに頼るEs6 arrow function syntax

として

<BorderColor onClick = {() => this.openFunc(this.state.ids[i])}/> 

またはbind構文など

<BorderColor onClick = {this.openFunc.bind(this, this.state.ids[i]} /> 

といくつかの物事が目立つ

openFunc(value) { 
    this.setState({ 
    open_dialog: true, 
    myid: value 
    }); 
} 

Answer 2

ようopenFuncでそれを使用します。

まず、同じ型の配列内の項目は、それらを互いに区別するためにキープロパティが必要です。これを単に以下のように追加する必要があります。

for(i=0; i<this.state.ids.length;i++) { 
    container.push(
      <BorderColor key={i} onClick={this.openFunc} data-id=this.state.ids[i]}/> 
    ) 
    } 

また、data-id値を使用することもできますが、それは「反応する方法」ではありません。カレー化された機能を使用するように変更することをお勧めします。

openFuncをこれに変更します。

openFunc(id) { 
    return (e) => { 
     this.setState({ 
      open_dialog: true, 
      myid: id 
     }); 
} 

これをそのままBorderColorコンポーネントに適用できます。

for(i=0; i<this.state.ids.length;i++) { 
    container.push(
      <BorderColor key={i} onClick={this.openFunc(this.state.ids[i])}/> 
    ) 
    }