Javascript 单击处理程序以调用“材质UI”对话框时，工作不正常

我希望每次单击按钮时都会弹出“材质ui”对话框，并完美地显示目标值。它有时显示，但有时不显示。我正在发送图标onclick事件-（e）上的值，并在onclick函数上使用它。我正在react.js上做这件事。组件中有bug吗

我刚刚发现这不是我遇到的对话框组件问题。 我有时在点击图标时在openFunc函数中的控制台上得不到值

也有同样的问题吗？有什么帮助吗？

具有以下代码：

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

import React，{Component}来自'React'；
从“材料界面/对话框”导入对话框；
从“材质ui/svg图标/编辑器/边框颜色”导入边框颜色；
类Mydialog扩展组件{
构造函数（）{
超级（）；
此.state={
识别码：['129'，'105'，'131'，'151']，
myid:“”，
打开对话框：false
}
this.openFunc=this.openFunc.bind（this）；
}
今天检查{
让容器=[]；
让我；
对于（i=0；i{
this.setState（{open_dialog:false}）；
};
render（）{
返回(
{this.check_today（）}
这是对话框！
我的id是{this.state.myid}
)
}
}
导出默认Mydialog

对于值，您可以使用

Es6箭头函数语法将值传递给onClick函数，而不是依赖
数据id

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

并在
openFunc
中使用它

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

有几件事很突出

首先，同一类型数组中的项需要一个键属性来区分它们

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

然后可以将其应用于BorderColor组件

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

for（i=0；ii不看代码很难回答。只需添加代码中使您的问题更清晰的部分。谢谢。部分代码是@NarasimhaReddy
openFunc(id) {
    return (e) => {
        this.setState({
           open_dialog: true,
           myid: id
        });
}

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