Le gestionnaire onClick pour appeler la boîte de dialogue Material UI ne fonctionne pas correctement

Question

Je souhaite que la boîte de dialogue material-ui apparaisse toujours en cliquant sur le bouton et affiche la valeur cible à chaque fois. Cela se voit parfois mais parfois non. J'envoie la valeur sur l'événement icon onclick - (e) et l'utilise dans la fonction onClick. Je le fais au react.js. Y a-t-il un bug dans le composant? J'ai juste découvert que ce n'était pas le problème de composant de dialogue que je recevais. Je ne reçois pas la valeur parfois sur console.log dans la fonction openFunc tout en appuyant sur l'icône.

Avez-vous eu le même problème? De l'aide?

Avoir le code suivant:

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

Au lieu de compter sur data-id pour la valeur que vous pouvez passer la valeur à la fonction onClick en utilisant la Es6 arrow function syntax comme

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

ou la syntaxe bind comme

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

et l'utiliser dans openFunc comme

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

Answer 2

Quelques choses se démarquer; Tout d'abord, les éléments d'un tableau du même type requièrent une propriété de clé pour les différencier les uns des autres. Il est nécessaire d'ajouter ceci simplement comme suit;

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

De même, bien que vous puissiez certainement utiliser la valeur de l'ID de données, ce n'est pas la «réaction». Je recommanderais de le changer pour utiliser une fonction au curry.

Remplacez openFunc par ceci;

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

Ce que vous pouvez ensuite appliquer au composant BorderColor en tant que tel;

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