ag-grid React Header Component Select 所有复选框选择在手机和平板电脑上无法正常工作

Question

我遇到了一个奇怪的问题，我正在使用 ag-grid.

实现 Header 组件 Select 所有复选框选择

它在桌面上按预期工作，但当我在平板电脑或移动设备上测试相同的功能时，复选框选择随机工作。

我的意思是，当我在复选框内单击时，它没有被选中，但是当我单击复选框左边框附近的某个位置时，它被选中。

到目前为止我尝试过的事情：

也尝试将 onClick 更改为 onChange，但没有成功。
尝试放置按钮而不是复选框，但问题仍然存在。
尝试将输入复选框直接放在 return 语句中，但相同
问题。

下面是相同的代码：

列定义：

this.setState({
      terminalAllocationsColumnDefs: [
        {headerName:"",field:"status", width:150, cellRendererFramework: CheckBoxRenderer, headerComponentFramework : HeaderCheckBoxRenderer,HeaderChangeCallback:this.headerChangeCallback},
        {headerName: this.state.multiLangMsgs.TERMINAL_ID, field: "DId", width: 250},
        {headerName: this.state.multiLangMsgs.TERMINAL_TYPE, field: "DType", width: 250},
        {headerName: this.state.multiLangMsgs.MSISDN, field:"MsId", width:260},
        {headerName: this.state.multiLangMsgs.SIM_ID, field:"SimId", width:260},
        {headerName: this.state.multiLangMsgs.SATALITE_ID, field:"DKey", width:250}
      ]
    });

HeaderCheckBoxRenderer 组件：

onCheckBoxChange(){
        this.selectAll = false;
        if(this.state.checkStatus == "inactive"){
            this.setState({
                checkStatus :"active"
            });
            this.selectAll = true;
        }else {
            this.setState({
                checkStatus: "inactive"
            });
        }
        // }console.clear();
        // console.log(this);
            try{
                if(this.props.column.colDef.HeaderChangeCallback){
                    this.props.column.colDef.HeaderChangeCallback(this.selectAll);
                }
            }catch(e){}
    }
    render() {
        return (
            <div class="ag-header-cell" style={{"padding":"4px 4px 4px 5px"}}>
                <div class="ag-header-cell-resize"/>
                <div class="ag-header-select-all"/>
                <div class="ag-header-component"/>
                <input id="checkboxMember" type="checkbox" onClick={this.onCheckBoxChange.bind(this)} className="check" checked={this.state.checkStatus == "active" ? true : false}/>
            </div>
        );
    }

桌面

平板电脑

如您所见，它在桌面上按预期工作，但在平板电脑上，当我单击靠近左边框的某个位置时它工作正常。

谁能帮我解决这个奇怪的问题。

提前致谢。

Answer 1

我终于解决了这个问题。

问题：

一些当 header 复选框被用户点击时，列拖动开始事件也被触发从而覆盖或抑制复选框的点击事件。

解法：

因为这是一个根据我的客户需要的复选框列，用户不需要重新定位它因此抑制列移动（suppressMovable: true）解决了我的问题，像这样：

this.setState({
      terminalAllocationsColumnDefs: [
        {headerName:"",field:"status", width:150, cellRendererFramework: CheckBoxRenderer, headerComponentFramework : HeaderCheckBoxRenderer,HeaderChangeCallback:this.headerChangeCallback, suppressMovable: true},
        {headerName: this.state.multiLangMsgs.TERMINAL_ID, field: "DId", width: 250},
        {headerName: this.state.multiLangMsgs.TERMINAL_TYPE, field: "DType", width: 250},
        {headerName: this.state.multiLangMsgs.MSISDN, field:"MsId", width:260},
        {headerName: this.state.multiLangMsgs.SIM_ID, field:"SimId", width:260},
        {headerName: this.state.multiLangMsgs.SATALITE_ID, field:"DKey", width:250}
      ]
    });

如果有人对同一问题有其他解决方案，请告诉我。

谢谢。

ag-grid React Header Component Select 所有复选框选择在手机和平板电脑上无法正常工作

ag-grid React Header Component Select all Checkbox selection not working on mobile and tablet properly

javascript

events

reactjs

ag-grid

ag-grid-react

ag-grid React Header Component Select 所有复选框选择在手机和平​​板电脑上无法正常工作

ag-grid React Header Component Select all Checkbox selection not working on mobile and tablet properly

javascript

events

reactjs

ag-grid

ag-grid-react

ag-grid React Header Component Select 所有复选框选择在手机和平板电脑上无法正常工作