1

所以我得到了一个这样的对话框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;

当我打开所说的 Modal 时，如何确保只创建一个 Modal 并更改对象？

4

1 回答 1

4

主要问题是您将模态置于错误的位置。它应该存在于渲染整个表格的父组件中。

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

<VehiclePlantRow onSelect={this.onSelect}/>

然后在表格之后，以与您当前拥有它的方式相同的方式包含模态，但引用 plantfrom 状态，而不是 props；

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

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

于 2016-05-30T21:13:50.433 回答