在不重构代码的情况下正确定位 Modal React

Question

我有一个 class InventoryView，它显示库存项目列表，定义如下：

class InventoryView extends Component {
   ...

render() {

   ...

   {  
   consumableItemsArray.map((row, key) =>
   <Item item={row} key={row.id} />
   )} 

  ...

}
}

class 项目基本上是库存项目列表中的每个库存，定义如下：

class Item extends Component {
    ...

    render() {
    ...
    return (

        <HorizontalRow>
             ...

           <EditAStockItem></EditAStockItem>

        </HorizontalRow>
       )

    }

class EditAStockItem 基本上是一个编辑按钮，单击该按钮时应显示模态框，其定义如下：


class EditAStockItem extends Component {

    constructor(props) {
        super(props)
        this.state = { isShowingInventoryUpdationModal: false }
    }


    editStockItem = event => {
        event.preventDefault()
        this.setState({ isShowingInventoryUpdationModal: true })


    }



    openInventoryUpdationHandler = () => {
        console.log('Inside openInventoryUpdationHandler')
        this.setState({
            isShowingInventoryUpdationModal: true
        });
    }



    closeInventoryUpdationHandler = () => {
        this.setState({
            isShowingInventoryUpdationModal: false
        });
    }

    render() {
        const { isShowingInventoryUpdationModal } = this.state  

       if(!isShowingInventoryUpdationModal)
        return <EditStockItemButton onClick={this.editStockItem}><i class="fa fa-edit" aria-hidden="true"></i></EditStockItemButton>

       else
       {
        return (
        <div>
        { this.state.isShowingInventoryUpdationModal ? <div onClick= 
          {this.closeInventoryUpdationHandler}></div> : null }

       <UpdateStockItemModal
          className="modal"
          show={this.state.isShowingInventoryUpdationModal}
          close={this.closeInventoryUpdationHandler}>
          Please insert a client name :
          </UpdateStockItemModal>
        </div>

       )}

    }
}

openInventoryUpdationHandler 和 closeInventoryUpdationHandler 设置变量 isShowingInventoryUpdationModal 的状态，当单击编辑按钮。当变量 isShowingInventoryUpdationModal 变为真时，模式打开并取代编辑按钮，从而使整个页面向上倾斜。我希望模态框像模态框一样位于整个页面的顶部。有没有什么办法可以在不改变我的代码当前结构的情况下做到这一点？

Modal定义如下：

class UpdateStockItemModal extends Component  {

    constructor(props) {
        super(props)


        this.state = {

            show : props.show,
            close : props.close,
            children : props.children,
        }

    }


    prepareComponentState (props) {
    var usedProps = props || this.props

    this.state = {

            show : usedProps.show,
            close : usedProps.close,
            children : usedProps.children,
        }    

    }





    componentWillReceiveProps = async (nextProps) => {

        this.prepareComponentState(nextProps)
    }


    componentWillMount = async (props) => {

        this.prepareComponentState()
    }



    render() {

        var { stockName, totalQuantity, show, close, children } = this.state




    return (
            <div>

            <div className="modal-wrapper"
                style={{
                    transform: show ? 'translateY(0vh)' : 'translateY(-100vh)',
                    opacity: show ? '1' : '0'
                }}>


                <div className="modal-header">
                    <h3>Update Stock Item</h3>
                    <span className="close-modal-btn" onClick={close}>×</span>
                </div>


                <FormContainer>
                    <InputStockNameContainer>
                    <p>Enter Stock Name</p>
                    <InputText
                    type="text"
                    value={ stockName }

                    onChange={this.handleChangeInputStockName}
                    />
                    </InputStockNameContainer>


                    <InputTotalQuantityContainer>
                    <p>Enter Total Quantity</p>
                    <InputText
                    type="text"
                    value={ totalQuantity }

                    onChange={this.handleChangeInputTotalQuantity}
                    />
                    </InputTotalQuantityContainer>

                    </FormContainer>





                <div className="modal-footer">
                    <button className="btn-cancel" onClick={close}>CLOSE</button>
                    <button className="btn-continue" onClick = {this.handleIncludeClient}>CONTINUE</button>
                </div>
            </div>
        </div>
    )
    }
}


export default UpdateStockItemModal;

Answer 1

您可以使用 css 修复整个问题，方法是固定位置的模态并使用 z-index 位于顶部。

这是我的简单模态演示：

.modal {
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

在不重构代码的情况下正确定位 Modal React

Correctly positioning a Modal without restructuring code React

html

javascript

modal-dialog

reactjs