Question

我有一个非常简单的模式，我想重用它来显示动态数据

class Modal extends Component {

    constructor(props) {
        super(props)
        this.handleKeyDown = this.handleKeyDown.bind(this);
        this.handleCloseModal = this.handleCloseModal.bind(this);
    }

    handleKeyDown(event) {
        if (event.key === 'Escape') {
            this.handleCloseModal()
        }
    }

    handleCloseModal() {
        // What should I do here? Unmount?
    }

    componentDidMount() {
        document.addEventListener('keydown', this.handleKeyDown, false);
    }

    render() {

        return(

            <div className="modal">
                <button onClick={() => this.handleCloseModal()}>close modal</button>
                {this.props.children}
            </div>

        )
    }
}

export default Modal

我想使用 records 数组中每个 elem 的 elem.description 数据打开模式。

{records.map(function(elem, index) {
    return <button 
            key={index} 
            onClick={// Something like <Modal>{elem.description}</Modal>} 
        /> open modal for {elem.name}</button>
})}

我读到一些实现类似功能的实现

<Modal show=true>...</modal>

并切换其可见性。我可以卸下组件吗？这是个好习惯吗？

Answer 1

一种实现方法是将被单击的元素保存为状态，然后在单击时显示模式。

{records.map(function(item, index) {
    return <button 
            key={index} 
            onClick={this.openModal(item)} // open modal and set the current item in the state
        /> open modal for {elem.name}</button>
})}

您需要一个函数来将元素设置为当前元素并打开模态

openModal = (item) =>() => {
 this.setState({currentItem:item, isModalVisible: true})
}

最后，在您的模态中，将项目组件作为孩子传递，并为其提供来自州的数据

<Modal isVisible={this.state.isModalVisible}>
  <MyItem data={this.state.currentItem} />
</Modal>

在React中重用Modals

1 个答案: