无需重新构建代码React即可正确定位模态

Question

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

class InventoryView extends Component {
   ...

render() {

   ...

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

  ...

}
}

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

class Item extends Component {
    ...

    render() {
    ...
    return (

        <HorizontalRow>
             ...

           <EditAStockItem></EditAStockItem>

        </HorizontalRow>
       )

    }

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的状态，该状态在单击编辑按钮时变为true。当变量isShowingInventoryUpdationModal变为true时，将打开一个模态并替换编辑按钮，从而使整个页面倾斜。我希望Modal像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>