Javascript 访问并显示位于另一个组件中的模态

我有一个

PersonList

组件，无论用户在哪里单击

列表。Item

我想将一些细节，如

personId

传递给

PersonModel

，并显示它。我正在为modal使用Ant设计组件

下面是我尝试过的，但不幸的是，我遇到了如下错误：

警告：无法对尚未安装的组件调用setState。 这是一个no-op，但它可能表示应用程序中存在错误。 相反，直接分配给

this.state

，或者定义一个

state={}
在PersonModel组件中使用所需状态初始化属性

PersonModal.js

import React from "react";
import {Modal} from "antd";

class PersonModal extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props.personId)
    }

    state = { visible: false };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    // handleOk (...)
    // handleCancel (...)

    render() {
        return <Modal
            title="Basic Modal"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
        >
            Modal body
        </Modal>
    }
}
export default PersonModal;

import React from "react";
import {Icon, Input, List, Avatar} from "antd";
import PersonModal from "PersonModal/PersonModal"

class PersonList extends React.Component {

    showModal(personId) {
        const modal = new PersonModal({personId: 123})
        modal.showModal()
    }

    render() {
        const persons = this.props.list;
        return (
            <div>
            <List
                itemLayout="horizontal"
                dataSource={persons}
                renderItem={item => (
                    <>
                    <List.Item onClick={this.showModal(123)} style={{cursor: 'pointer'}}>
                        <List.Item.Meta
                            avatar={<Avatar src="avatar.png"/>}
                            title={<span>{item.firstName} {item.lastName}</span>}
                            description={<span>{item.city}, {item.country}</span>}
                        />
                    </List.Item>
                    </>
                )}
            />
            </div>
        );
    }
}

解决这个问题的正确方法是什么？因为我是新手，所以我认为这不是一个正确的方法

您需要跟踪PersonList组件中PersonModel的可见状态。您应该有一个布尔变量来控制PersonModel的可见性

并且PersonModel不会控制其可见状态，而是从其客户端获取，在您的情况下，客户端是PersonList。因此，让我们从代码开始

首先，编辑PersonModel组件以期望其客户提供道具

class PersonModal extends React.Component {
    // handleOk (...)
    // handleCancel (...)

    handleCancel = () => {

        // because the client controls the visivlity state of the component
        this.props.hideModal();
    }

    render() {
         /// this.props.isVisible is required, and it will be a boolean true or false.
        const shouldBeVisible = this.props.isVisible;

        return <Modal
            title="Basic Modal"
            visible={shouldBeVisible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
        >
            Modal body
        </Modal>
    }
}
export default PersonModal;


类PersonModal扩展React.Component{
//handleOk（…）
//handleCancel（…）
handleCancel=（）=>{
//因为客户端控制组件的可见性状态
this.props.hideModal（）；
}
render（）{
///this.props.isVisible是必需的，它将是布尔值true或false。
const shouldbeevisible=this.props.isVisible；
返回
模态体
}
}
导出默认个人模式；

因此，现在您的PersonModal组件将导出一个道具；它是可见的


class PersonList extends React.Component {

    state = {
        // the client controls the visibility of the modal with this state key;
        showModal: false,
        personId: null
    }


    // edited
    showModal = (personId) => {
       // set state to update the UI and show the PersonModal
        this.setState({
            showModal: true,
            personId: personId
        });
    }

     hideModal= () => this.setState({showModal: false});

    render() {
        const persons = this.props.list;
        return (
            <div>
             // now PersonModal will only be visible when the parent of it tells it to
            <PersonModal 
            isVisible = {this.state.showModal} 
                hideModal= {this.hideModal}
/>   
            <List
                itemLayout="horizontal"
                dataSource={persons}
                renderItem={item => (
                    <>
                    <List.Item onClick={() => this.showModal(123)} style={{cursor: 'pointer'}}>
                        <List.Item.Meta
                            avatar={<Avatar src="avatar.png"/>}
                            title={<span>{item.firstName} {item.lastName}</span>}
                            description={<span>{item.city}, {item.country}</span>}
                        />
                    </List.Item>
                    </>
                )}
            />
            </div>
        );
    }
}


类PersonList扩展了React.Component{
状态={
//客户端使用此状态键控制模式的可见性；
showModal：错，
personId:null
}
//编辑
showModal=（personId）=>{
//设置状态以更新UI并显示PersonModel
这是我的国家({
是的，
personId:personId
});
}
hideModal=（）=>this.setState（{showmodel:false}）；
render（）{
const persons=this.props.list；
返回(
//现在，PersonModel只有在其父节点告诉它时才可见
(
this.showmodel（123）}style={{cursor:'pointer'}}>
)}
/>
);
}
}

希望它能帮助你

这就是在React world中处理问题的方法
您需要跟踪PersonList组件中PersonModel的可见状态。您应该有一个布尔变量来控制PersonModel的可见性

并且PersonModel不会控制其可见状态，而是从其客户端获取，在您的情况下，客户端是PersonList。因此，让我们从代码开始

首先，编辑PersonModel组件以期望其客户提供道具

class PersonModal extends React.Component {
    // handleOk (...)
    // handleCancel (...)

    handleCancel = () => {

        // because the client controls the visivlity state of the component
        this.props.hideModal();
    }

    render() {
         /// this.props.isVisible is required, and it will be a boolean true or false.
        const shouldBeVisible = this.props.isVisible;

        return <Modal
            title="Basic Modal"
            visible={shouldBeVisible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
        >
            Modal body
        </Modal>
    }
}
export default PersonModal;


类PersonModal扩展React.Component{
//handleOk（…）
//handleCancel（…）
handleCancel=（）=>{
//因为客户端控制组件的可见性状态
this.props.hideModal（）；
}
render（）{
///this.props.isVisible是必需的，它将是布尔值true或false。
const shouldbeevisible=this.props.isVisible；
返回
模态体
}
}
导出默认个人模式；

因此，现在您的PersonModal组件将导出一个道具；它是可见的


class PersonList extends React.Component {

    state = {
        // the client controls the visibility of the modal with this state key;
        showModal: false,
        personId: null
    }


    // edited
    showModal = (personId) => {
       // set state to update the UI and show the PersonModal
        this.setState({
            showModal: true,
            personId: personId
        });
    }

     hideModal= () => this.setState({showModal: false});

    render() {
        const persons = this.props.list;
        return (
            <div>
             // now PersonModal will only be visible when the parent of it tells it to
            <PersonModal 
            isVisible = {this.state.showModal} 
                hideModal= {this.hideModal}
/>   
            <List
                itemLayout="horizontal"
                dataSource={persons}
                renderItem={item => (
                    <>
                    <List.Item onClick={() => this.showModal(123)} style={{cursor: 'pointer'}}>
                        <List.Item.Meta
                            avatar={<Avatar src="avatar.png"/>}
                            title={<span>{item.firstName} {item.lastName}</span>}
                            description={<span>{item.city}, {item.country}</span>}
                        />
                    </List.Item>
                    </>
                )}
            />
            </div>
        );
    }
}


类PersonList扩展了React.Component{
状态={
//客户端使用此状态键控制模式的可见性；
showModal：错，
personId:null
}
//编辑
showModal=（personId）=>{
//设置状态以更新UI并显示PersonModel
这是我的国家({
是的，
personId:personId
});
}
hideModal=（）=>this.setState（{showmodel:false}）；
render（）{
const persons=this.props.list；
返回(
//现在，PersonModel只有在其父节点告诉它时才可见
(
this.showmodel（123）}style={{cursor:'pointer'}}>
)}
/>
);
}
}

希望它能帮助你

这就是在React世界中处理问题的方式
不断调用onClick处理程序。将它们更改为返回您希望调用的函数的函数，这将解决您的问题

所以


而不是：

我们这样做：
{this.showmodel（123）}}style={{{cursor:'pointer'}}>

更新的
您的onClick处理程序正在不断被调用。将它们更改为返回您希望调用的函数的函数，这将解决您的问题

所以


而不是：

我们这样做：
{this.showmodel（123）}}style={{{cursor:'pointer'}}>

更新的
如果您共享一个复制此问题的工作stackblitz，则更容易help@AkberIqbal根据下面的答案和我准备的当前问题，请在Thank you@AkberIqbal上检查分叉版本，无误，看起来就像我意识到它的时候一样