用于编辑的单个对话框 - 在渲染时更改对象 - React Modal

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;

这很好用，但现在当我将它连接到 table 时，我是在为每个项目创建 1 个模态吗？

Table行：

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

主要问题是您将模式放在错误的位置。它应该存在于呈现整个 table.

的父组件中

对于每一行，将一个函数作为 prop 传递给它；

<VehiclePlantRow onSelect={this.onSelect}/>

然后在 table 之后，包括与您当前拥有的模态相同的模态，但引用 plantfrom 状态，而不是道具；

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

并创建 onSelect 函数；

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

在 VehiclePlantRow 中，替换现有的 onClick 函数以引用作为 prop 传入的父函数；

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

将其余与模态相关的功能也移至父组件，您应该已准备就绪。

用于编辑的单个对话框 - 在渲染时更改对象 - React Modal

Single Dialog for edit - change object on render - React Modal

reactjs

react-modal