シングルダイアログ - - レンダリングの変更オブジェクトは、モーダル

Question

ので、私はこのようなReact-Modalを使用してダイアログを得たリアクトアイテムごとに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; 

どのように私はちょうど1モーダルを作成することを確認し、私が開いてるときにオブジェクトを変更することができますがモーダル言いましたか？

Answer 1

主な問題は、モーダルが間違った場所にあることです。テーブル全体をレンダリングしている親コンポーネントに存在する必要があります。

各行に対して、関数を小道具として渡します。

<VehiclePlantRow onSelect={this.onSelect}/> 

次に、現在の方法と同じようにモーダルを含めますが、propsではなくplantfromの状態を参照してください。

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

そして、onSelect関数を作成します。 VehiclePlantRow内

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

、小道具として渡された親関数を参照するために、既存のonClick関数を置き換えます。

残りのモーダル関連関数を親コンポーネントにも移動すると、すべて設定する必要があります。