调用 Material UI 对话框的 onClick 处理程序无法正常工作

Question

我希望 material-ui 对话框始终在单击按钮时弹出，并且每次都能完美显示目标值。有时显示有时不显示。我在图标 onclick 事件上发送值 - (e) 并在 onClick 函数上使用它。我在 react.js 上进行。组件中是否存在错误？

我刚刚发现这不是我遇到的对话框组件问题。在点击图标时，有时 console.log 函数中的 console.log 没有得到值。

有同样的问题吗？有帮助吗？

具有以下代码：

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

您可以使用 Es6 arrow function syntax 作为

将值传递给 onClick 函数，而不是依赖于 data-id

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

或 bind 语法为

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

并在 openFunc 中使用它，例如

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

Answer 2

有几件事很突出；

首先，数组中相同类型的项目需要一个键属性来区分它们。有必要简单补充一下，如下；

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 值，但它不是 "react way"。我建议将其更改为使用柯里化函数。

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

调用 Material UI 对话框的 onClick 处理程序无法正常工作

onClick handler to call Material UI dialog box, is not working properly

javascript

dialog

buttonclick

reactjs

material-ui