具有相同 ID 的不同按钮的多个弹出窗口

Question

我有一个带有 STATUS 列的表，所以每当状态有错误值时，我需要显示错误的弹出框 onClick 并使用弹出框内的关闭按钮将其关闭。问题是当我单击第一行错误时，表中所有错误的所有弹出窗口都会出现，当我关闭一个时，所有错误都会关闭。但我需要弹出框仅在单击错误状态时打开和关闭。我正在使用反应框架。有人可以帮我吗？ 这是我的弹出框代码

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

getTarget = () => {
    return ReactDOM.findDOMNode(this.target);
};

handleToggle = () => {
    this.setState({ popoverShow: !this.state.popoverShow });
};

let installedDCToolTip = (
                    <Popover id="datacollector-error-message-popover"
                        className="netapp-help-inline__popover tw-mt-10px"
                    >
                        <PopoverDiv className="tw-leading-lg">
                            <span className="row tw-font-body tw-text-lg tw-inline-flex tw-justify-between" >Error
                            <button
                                    id="close-datacollector-error-popover"
                                    type="button"
                                    className="btn-icon-no-bg close"
                                    onClick={this.handleToggle}>
                                    <i className="oci-app oci-close"></i>
                                </button>
                            </span>
                            <hr className="tw-mb-sm" />
                            <div>{info.record.message}</div>
                            <a
                                id="datacollector-status-error-docs"
                                href={DATA_COLLECTOR_ERROR_HELP_DOC_URL}
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                Need Help?
                        </a>
                        </PopoverDiv>
                    </Popover>
                );

叠加

return (info.value === COLLECTOR_STATUS.ERROR || info.value === COLLECTOR_STATUS.RETRYING) ? 
 <button
                            id="datacollector-error-detail-button"
                            ref={button => {
                                this.target = button;
                            }}
                            onClick={this.handleToggle}
                        >
                            <span className="tw-text-hyperlink">Error Detail</span>
                        </button>
                        <Overlay {...sharedPropsForOverlay} placement="bottom">
                            {installedDCToolTip}
                        </Overlay>
                    </div>
                    
                    : <span>{_.startCase(_.capitalize(info.value))}</span>;

 render() {
        const sharedPropsForOverlay = {
            container: this,
            target: this.getTarget,
            show: this.state.popoverShow


           };
/* render table */

    }

Answer 1

为每一行维护一个自我状态。例如

const YourRow = ()=>{
  
   const [popoverOpen, setPopOverOpen] = useState(false);
   const someActionThatChangeState = ()=>{
       setPopOverOpen(true);
   } 


   return <tr>

        ====================
        ====================
        <PopOver></PopOver>
        <SomeIconORButton reactEvent(onCick etc)={someActionThatChangeState} />
         </tr> //This is specific to your row you can change what ever you want
 }