Reactjs 在再次打开之前，请卸载或删除以前打开的组件

我有一个表的内联编辑组件。每当我单击表格单元格时，它都会打开一个小编辑窗口进行编辑

问题-如果我点击另一个单元格，它会打开一个新的编辑窗口，并在屏幕上显示多个编辑窗口

需要删除/卸载编辑窗口的上一个实例的建议。正在删除引发未捕获异常的DOM元素

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

编辑--- 编辑组件代码-

class TextEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isInlineEditVisible: false };
    }

    render() {
        return (
            <span
                style={{
                    marginLeft: '10px',
                }}
            >
               <CellAction>
                   <EditIconButton
                       size={16}
                       onClick={() => {
                            this.setState({ isInlineEditVisible: true });
                     }}
                   />
               </CellAction>

                {this.state.isInlineEditVisible && (
                        <InlineEdit
                            label={this.props.label}
                            value={this.props.param.dataPoint}
                            onSave={(value) => {
                                this.props.onSave(value, this.props.param);
                            }}
                            onCancel={() => {
                                this.setState({ isInlineEditVisible: false });
                            }}
                        />
                    </span>
                )}
            </span>
        );
    }
}

类文本编辑扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={isInlineEditVisible:false}；
}
render（）{
返回(
{
this.setState（{isinlineditvisible:true}）；
}}
/>
{this.state.isInlineEditVisible&&(
{
this.props.onSave（值，this.props.param）；
}}
onCancel={（）=>{
this.setState（{isinlineditvisible:false}）；
}}
/>
)}
);
}
}

---

我将此组件作为InlineEdit组件的包装器编写，因为我需要它与多列表的每个单元格一起使用。

这是我的想法。让我们将循环单元格的包装器称为单元格组件的CellWrapper和Cell

const Cell = ({ cell, editCellId, setEditCellId }) => (
 <div> 
   // Cell code


   <EditIconButton
     size={16}
     onClick={() => {
       setEditCellId({ editCellId: cell.id });
     }}
   />

   // EditWindow Code
   {editCellId && editCellId === cell.id && <EditWindow />}
 </div>
)

class CellWrapper extends Component{
   state = {
      editCellId: null
   }
   render(){
      const { cells } = this.props;
      return(
        <div>{cells.map( cell => 
          <Cell
            cell={cell}
            editCellId={this.state.editCellId}
            setEditCellId={(editCellId) => this.setState({editCellId})}
          />
         )
        }</div>
      ) 
   }
}

const Cell=（{Cell，editCellId，setEditCellId}）=>(
//细胞代码
{
setEditCellId（{editCellId:cell.id}）；
}}
/>
//编辑窗口代码
{editCellId&&editCellId==cell.id&&}
)
类CellWrapper扩展组件{
状态={
editCellId:null
}
render（）{
const{cells}=this.props；
返回(
{cells.map（cell=>
this.setState（{editCellId}）
/>
)
}
) 
}
}

您能否共享一段显示此编辑窗口相对于表格单元格位置的代码？将“小编辑窗口”设为模式窗口或在其后面添加一个浮动的完整窗口div（

位置：绝对；

），以阻止用户单击表格或跟踪“小编辑窗口”的状态要检查它是否可见，请关闭它并打开新的。。。您也可以使用

React.useffect（）

或在

componentDidMount（）

中设置状态。。。请添加一些代码以解决您的问题…@AjayVarghese添加了代码。@DIEGOCARRASCAL添加了代码在这种情况下，而不是布尔值，请存储单元格的索引或id，您需要打开编辑窗口。在循环单元格数据以呈现单元格组件时，您可以检查单元格id/索引是否与处于状态的单元格id/索引匹配，并显示编辑窗口。谢谢您的回答。在我的例子中，单元组件是类组件。我使用这个组件的方式如下

{param.value}

@PrashantSharma您可以将Cell组件作为一个类。这里最重要的一点是，您必须保持活动编辑单元id（即打开编辑窗口的单元的id）处于可以访问所有其他单元的级别。在上面的代码中，它是CellWrapper组件，我在其中循环所有单元格，并控制所有单元格。