소재 UI 대화 상자를 호출하는 onClick 핸들러가 제대로 작동하지 않습니다.

Question

버튼을 클릭 할 때 항상 재질 - UI 대화 상자가 팝업되어 항상 매번 목표 값을 표시하고 싶습니다. 때로는 보여 주지만 때로는 그렇지 않습니다. 아이콘 onclick 이벤트에 값을 보냅니다 - (e) onClick 함수에서 사용합니다. 나는 react.js에 있습니다. 구성 요소에 버그가 있습니까?

방금 ​​대화 구성 요소 문제가 아니라는 것을 알았습니다. console.logopenFunc의 값을 가끔씩 가져 오는 중 아이콘을 두드리는 중입니다.

같은 문제가 있었습니까? 어떤 도움이 필요합니까?

다음 코드를 갖는 다음을 사용하여 온 클릭 함수에 값을 전달할 수 있습니다

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]}/> 
    ) 
    } 

또한 데이터 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])}/> 
    ) 
    }