一個對話框進行編輯 - 陣營模態

Question

，所以我就用React-Modal這樣的對話 - 上渲染更改對象：

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; 

也能正常工作，但現在當我這個勾到一個表中，我創建每個項目1個模態對不對？

錶行：

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; 

我怎樣才能確保當我開口道莫代爾創建只有一個模態，改變對象？

Answer 1

主要問題是您的模式位於錯誤的位置。它應該存在於渲染整個表的父組件中。

對於每一行，傳遞一個函數作爲道具;

<VehiclePlantRow onSelect={this.onSelect}/> 

然後在表格後，包含模式與您目前如何擁有它相同，但引用plantfrom狀態，而不是道具;

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

並創建onSelect函數;

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

在VehiclePlantRow，替換現有的onClick函數引用傳過來的道具父功能;

<button onClick={this.props.onSelect.bind(this, this.props.plant)}>Edit</button> 

將其餘的模態相關函數移動到父組件，並且您應該全部設置。