Question

所以我使用vagrant这样的对话框：

React-Modal

这种方法很好但是现在当我将它连接到桌子上时，我是否正确地为每个项目创建1个模态？

表格行：

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;

如何在打开所述模态时确保只创建一个模态并更改对象？

Answer 1

主要问题是你的模态位置错误。它应该存在于呈现整个表的父组件中。

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

<VehiclePlantRow onSelect={this.onSelect}/>

然后在表格之后，将模态与你现在拥有的模式完全相同，但引用植物来自状态，而不是道具;

<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

1 个答案: