React Bootstrap Table 每行都有创建模态的按钮，但是一个按钮会多次调用模态的渲染

Question

我有一个React Bootstrap Table，table的每一页都有20条记录。在每一行中，我使用以下行添加了一个按钮

function attachFormatter(cell, row){
     return (
        <AttachmentManager />
     );
 }
 <TableHeaderColumn key={uuid.v4()}
                   dataField={column.dataField}
                   dataFormat={attachFormatter}
                   hidden={hide}>
                    {column.label}
</TableHeaderColumn>

然后我这个页面有20个按钮，每一行都有一个按钮。如果单击其中一个按钮，我打算打开一个模式。但是当我点击一个按钮时，openModal() 运行会像预期的那样执行一次，但是我的 AttachmentManager 的 render() 函数会运行 20 次。如何解决？

export default class AttachmentManager extends React.Component {
    constructor (props) {
        super(props);
        this.state = {showModal: false};
    }

    openModal() {
        alert('test');
    }

    render () {
        return (
      <button onClick={this.openModal.bind(this)} className="btn btn-default">Add Projects
        <AttachmentModal show={this.state.showModal}/>
      </button>
        );
    }
}

下面是我的模态

import React from 'react';
import SimpleModal from '../common/SimpleModal';
export default class AttachmentModal extends React.Component {

    constructor (props) {
        super(props);
    }

    render () {
        return (
            <SimpleModal showModal={this.props.show}
                       onToggleModal={this.props.onHide}
                       title={this.props.title}
                       onCancelClick={this.props.onHide}
                       onPrimaryButtonClick={this.props.onPrimaryButtonClick}
                       cancelText="Cancel"
                       primaryButtonText={this.props.primaryButtonText}
                       loading={this.props.loading}
                       backdrop='static'
                       bsStyle={this.props.bsStyle}>
                {this.props.children}
            </SimpleModal>
        );
    }
}

Answer 1

将您的组件更改为 PureComponent。

export default class AttachmentManager extends React.PureComponent {
...
}

为所有按钮添加一个键。

 <button key={uuid.v4()} onClick={this.openModal.bind(this)} className="btn btn-default">Add Projects
        <AttachmentModal show={this.state.showModal}/>
      </button>

Answer 2

我也遇到了类似的问题，也是这样解决的

在 attachFormatter 中，将 row 值作为 props

function attachFormatter(cell, row){
     return (
        <AttachmentManager row={row} />
     );
 }
 <TableHeaderColumn key={uuid.v4()}
                   dataField={column.dataField}
                   dataFormat={attachFormatter}
                   hidden={hide}>
                    {column.label}
</TableHeaderColumn>

在 AttachmentManager 中，点击按钮设置 selectedRow 和 showModal 值。您可以使用 isObjectEquivalent 函数来比较行属性和 selectedRow 值。

export default class AttachmentManager extends React.Component {
  constructor(props) {
   super(props);
   this.state = {
    showModal: false,
    selectedRow: null
   };
  }

  openModal() {
   this.setState((prevState, props) => {
    return {
     selectedRow: props.row,
     showModal: true
    }
   });
  }

  isObjectEquivalent(a, b) {
   // Create arrays of property names
   var aProps = Object.getOwnPropertyNames(a);
   var bProps = Object.getOwnPropertyNames(b);

   // If number of properties is different,
   // objects are not equivalent
   if (aProps.length != bProps.length) {
    return false;
   }

   for (var i = 0; i < aProps.length; i++) {
    var propName = aProps[i];

    // If values of same property are not equal,
    // objects are not equivalent
    if (a[propName] !== b[propName]) {
     return false;
    }
   }

   // If we made it this far, objects
   // are considered equivalent
   return true;
  }

  render() {
    return ( 
    <div>
        <button onClick = {this.openModal.bind(this)} className = "btn btn-default"> Add Projects </button> 
        {this.state.showModal && this.isObjectEquivalent(this.props.row, this.state.selectedRow) ? ( < AttachmentModal show = {this.state.showModal} />) : null} 
     </div>
      );
     }
    }

希望对您有所帮助。

React Bootstrap Table 每行都有创建模态的按钮，但是一个按钮会多次调用模态的渲染

React Bootstrap Table has button in each row to create modal, but one button will call modal's render multiple times

reactjs

react-modal

react-bootstrap-table