React Bootstrapテーブルはモーダルを作成するために各行にボタンを持っていますが、1つのボタンはモーダルのレンダリングを複数回呼び出します

Question

私はReact Bootstrap Tableですが、テーブルの各ページには20レコードあります。各行に次の行を使用してボタンを追加しました

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

次に、このページには20個のボタンがあり、各行には1個のボタンがあります。私はボタンをクリックするとモーダルを開くつもりだった。しかし、1つのボタンをクリックすると、openModal()が期待どおり1回実行されますが、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

私も同様の問題に直面しており、このように解決しました。 attachFormatterで

、ボタンのクリックセットselectedRowとshowModal値で、AttachmentManagerで

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

小道具としてrow値を渡します。 isObjectEquivalent関数を使用して、row propsと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> 
    ); 
    } 
    } 

ご希望の場合はこちらをご覧ください。

Answer 2

変更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>