Einzel Dialog zum Bearbeiten - Änderungsobjekt auf machen - Reagieren Modal

Question

so bekam ich einen Dialog React-Modal wie folgt aus:

var React = require('react'), 
    ptypes = React.PropTypes; 
var ReactDOM = require('react-dom'); 
var $ = require('jquery'); 

var VehiclePlantDialog = React.createClass({ 
    PropTypes: { 
     vehiclePlant: ptypes.object 
    }, 
    openModal: function (vehiclePlant) { 
     this.props.vehiclePlant = vehiclePlant; 
     console.log(vehiclePlant); 
     this.props.openModal(); 
    }, 
    render: function() { 
     console.log(this.props.vehiclePlant); 
     return (
      <div className="modalLayout"> 
       <form> 
        <input ref="inputText" /> 
        <input type="submit" /> 
        <button onClick={this.props.closeModal}>Cancel</button> 
       </form> 
      </div> 
     ); 
    } 
}); 

module.exports = VehiclePlantDialog; 

Dies funktioniert gut, aber jetzt, wenn ich dies zu einem Tisch Haken, ich bin zu schaffen 1 Modal pro Stück richtig?

Tabellenzeile:

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Modal = require('react-modal'); 
var $ = require('jquery'); 
var VehiclePlantDialog = require('./VehiclePlantDialog.jsx'); 
const customStyles = { 
    content: { 
     top: '50%', 
     left: '50%', 
     right: 'auto', 
     bottom: 'auto', 
     marginRight: '-50%', 
     transform: 'translate(-50%, -50%)' 
    } 
}; 

var VehiclePlantRow = React.createClass({ 
    getInitialState: function() { 
     return { modalIsOpen: false }; 
    }, 
    openModal: function() { 
     console.log("set state open"); 
     this.setState({ modalIsOpen: true }); 
    }, 
    afterOpenModal: function() { 
    }, 
    closeModal: function() { 
     this.setState({ modalIsOpen: false }); 
    }, 
    componentWillMount: function() { 
     Modal.setAppElement('body'); 
    }, 
    render: function() { 
     return (
      <tr key={this.props.plant.id}> 
       <td>{this.props.plant.code}</td> 
       <td>{this.props.plant.name}</td> 
       <td>{this.props.plant.createdAt}</td> 
       <td>{this.props.plant.expiresAt}</td> 
       <td> 
        {this.props.plant.isExport == 0 ? 'No' : 'Yes'} 
       </td> 
       <td> 
        <button onClick={this.openModal}>Edit</button> 
        <Modal 
         isOpen={this.state.modalIsOpen} 
         onAfterOpen={this.afterOpenModal} 
         onRequestClose={this.closeModal} 
         shouldCloseOnOverlayClick={false} 
         style={customStyles} > 
         <VehiclePlantDialog openModal={this.openModal} closeDialog={this.closeModal} plant={this.props.plant}/> 
        </Modal> 
       </td> 
      </tr> 
     ); 
    } 
}); 

module.exports = VehiclePlantRow; 

Wie kann ich sicherstellen, dass nur ein Modal erstellen und das Objekt ändern, wenn ich Öffnen bin sagte Modal?

Answer 1

Das Hauptproblem ist, dass Sie das Modal an der falschen Stelle haben. Es sollte in der übergeordneten Komponente vorhanden sein, die die gesamte Tabelle rendert.

Für jede Zeile, übergeben Sie eine Funktion als eine Stütze;

<VehiclePlantRow onSelect={this.onSelect}/> 

Und dann nach der Tabelle, sind die modale identisch, wie Sie zur Zeit es haben, aber die plantfrom Staat verweisen, anstatt Requisiten;

<VehiclePlantDialog openModal={this.openModal} closeDialog={this.closeModal} plant={this.state.plant}/> 

Und erstellen Sie die onSelect-Funktion;

onSelect: function(plant){ 
    this.setState({plant: plant, modalIsOpen: true}); 
} 

Innerhalb VehiclePlantRow, ersetzen Sie Ihre bestehende onClick Funktion die übergeordnete Funktion übergeben als Stütze zu verweisen;

Verschieben Sie den Rest Ihrer modalen Funktionen auch auf die übergeordnete Komponente, und Sie sollten alle eingestellt werden.