Reactjs 组件模态 onclick div

Question

我正在尝试制作一个可以重用的模态组件，但我不明白我在这里做错了什么。模态没有出现。谁能帮帮我？

关于我的应用的一点解释。 这个应用程序正在加载一个 JSON url 并显示一个产品列表，可以将其标记为完成。如果您点击 div plaatjediv，您应该会看到一个弹出窗口（模式），其中包含点击产品的详细信息。

编辑：按照此处的建议编辑代码。如果单击 div，我可以看到状态更改为 true 和 false，但 Modal 仍然没有出现。

我的代码

App.js

import React from 'react';
import ProductModal from './ProductModal.js';


 class App extends React.Component {

    constructor(props) {
        super(props);
        this.toggleModal = this.toggleModal.bind(this);
        this.state = {
            isLoading: true,
            orders: [],
            dealtOrders: [],
            open: false
        }
    }

    toggleModal() {
        this.setState({
            open: !this.state.open
        });
    }

    componentWillMount() {
        localStorage.getItem('orders') && this.setState({
            orders: JSON.parse(localStorage.getItem('orders')),
            isLoading: false
        })
    }

    componentDidMount() {
        if (!localStorage.getItem('orders')){
            this.fetchData();
        } else {
            console.log('Using  data from localstorage');
        }
    }

    fetchData() {
        fetch('http://localhost:54408/api/orders/all/26-03-2018')
            .then(response => response.json())
            .then(parsedJSON => parsedJSON.map(product => (
                {
                    productname: `${product.ProductName}`,
                    image: `${product.Image}`,
                    quantity: `${product.Quantity}`,
                    isconfirmed: `${product.IsConfirmed}`,
                    orderid: `${product.OrderId}`
                }
            )))
            .then(orders => this.setState({
                orders,
                isLoading: false
            }))
            .catch(error => console.log('parsing failed', error))
    }

    render() {
        this.handleDoneAction = event =>
        {
            let itemIndex = event.target.getAttribute("data-itemIndex");
            let prevOrders = [...this.state.orders];
            let dealtOrders = [...this.state.dealtOrders];
            const itemToMoveAtLast = prevOrders.splice(itemIndex, 1);
            const addToDealtOrders = dealtOrders.concat(itemToMoveAtLast);
            this.setState({dealtOrders: addToDealtOrders});
            this.setState({orders: prevOrders});
        };

        this.handleUndoAction = event =>
        {
            let itemIndex = event.target.getAttribute("data-itemIndex");
            let orders = [...this.state.orders];
            let dealtOrders = [...this.state.dealtOrders];
            const undoDealtOrder = dealtOrders.splice(itemIndex, 1);
            const addToOrders = orders.concat(undoDealtOrder);
            this.setState({orders: addToOrders});
            this.setState({dealtOrders: dealtOrders});
        };

        const {isLoading, orders, dealtOrders,open} = this.state;
    return (
        <div>
            <header>
                <img src="/images/header.jpg"/>
                <h1>Boodschappenlijstje <button className="btn btn-sm btn-danger">Reload</button></h1>
            </header>
            <ProductModal open={open} />

                <div className={`content ${isLoading ? 'is-loading' : ''}`}>
                    <div className="panel">
                        {
                            !isLoading && orders.length > 0 ? orders.map((order, index) => {
                            const {productname, image, quantity, orderid} = order;
                            return<div className="product" key={orderid}>
                                <div className="plaatjediv" onClick={this.toggleModal}>
                                    <img className="img-responsive" src={image} />
                                </div>
                                <div className="productInfo">
                                    <p>{productname}</p>
                                    <p>Aantal: {quantity}</p>
                                </div>
                                <div className="bdone">
                                    <button className="btn btn-lg btn-default btndone" data-itemIndex={index} onClick={this.handleDoneAction}>Done</button>
                                </div>
                            </div>
                        }) : null
                        }
                    </div>
                    <h2>Mandje</h2>
                    <div className="panel">
                        {
                            !isLoading && dealtOrders.length > 0 ? dealtOrders.map((dorder, index) => {
                                const {productname, image, quantity, orderid} = dorder;
                                return<div className="productDone" key={index}>
                                    <div className="plaatjediv">
                                        <img className="img-responsive" src={image} />
                                    </div>
                                    <div className="productInfo">
                                        <p>{productname}</p>
                                        <p>Aantal: {quantity}</p>
                                    </div>
                                    <div className="bdone">
                                        <button className="btn btn-lg btn-default btndone" data-itemIndex={index} onClick={this.handleUndoAction}>Undo</button>
                                    </div>
                                </div>
                            }) : null
                        }
                    </div>
                    <div className="loader">
                        <div className="icon"></div>
                    </div>
                </div>
            </div>
        );
    }
} export default App;

ProductModal.js

  import React from 'react';

 class ProductModal extends React.Component {
constructor() {
    super();
}

render() {
    const open = this.props.open;
    return (
        <div className={'modal fade'+(open ? '' : 'hide')} tabindex="-1" role="dialog">
            <div className="modal-dialog">
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 className="modal-title">test</h4>
                    </div>
                    <div className="modal-body">
                        test
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" className="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    )
}
 }

 export default ProductModal;

Answer 1

我看不到模态框应该在哪里呈现。您必须将其添加到“App”类的渲染功能中。像这样：

render() {
  ...
  return(
    <ProductModal open={true} />
    ...
  ):
}

另外，在您的 toggleModal 函数中，执行以下操作：

this.setState({ open: !this.state.open});

希望这能解决问题。

Answer 2

问题是您的<App /> 中没有您的<ProductModal /> 作为组件除了设置您的打开状态，一旦显示，它将（或应该）永远不会隐藏，因为您将无法切换它再次使用您的按钮，并且您的 <ProductModal /> 本身也没有任何键绑定。

我建议你将<ProductModal /> 中的事件监听器绑定到

1. 检查是否按下了 ESC 键
2. 绑定一个取消/关闭按钮（除了标题 x 按钮）。
3. 监听是否点击了对话框之外的任何地方，关闭模式。

您还需要将处理程序从 <App /> 向下传递到 <ProductModal /> 以通知模式何时关闭。

在您的 App.js 中

handleClose() {
    this.setState({
        open: false
    });
}

render() {
    return (
        ...
        <ProductModal open={this.state.open} handleClose={this.handleClose.bind(this)} />
    )
}

然后在你的 ProductModal.js 中

handleClose() {
    this.props.handleClose();
}

使用我的沙盒观察以下内容： https://stackblitz.com/edit/react-98m4cr

您会看到我已经实现了handleClose 事件来控制状态备份到父级。另外，你可能想添加上面提到的监听器，最后都触发handleClose；只要记住在 ProductModal.js componentWillUnmount 中解绑它们。

Answer 3

我不确定你的问题是什么，但我猜你的模型没有打开？

设置状态时，需要设置为this.state.open的反面

你可以这样做：

toggleModal() {
    this.setState({
        open: !this.state.open
    });
}