编辑---

Question

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

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

需要建议删除/卸载编辑窗口的先前实例。删除引发未捕获异常的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>
        );
    }
}

我将此组件编写为InlineEdit组件的包装，因为我需要多列表的每个单元格。

Answer 1

这是主意。让我们称之为包装器，您可以在其中循环遍历单元格组件的 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>
      ) 
   }
}

再次打开前先卸下或卸下先前打开的组件

编辑---

1 个答案: