Question

我有一张带复选框的桌子。点击时，我必须以这样的方式收集我的数据：

f(n) = (n-1) * (f(n-2) + f(n-1))

之后，我必须向BE提出请求。 BE将向我返回一个包含所有单击或选定文档的ZIP文件。通常很简单，但是我有一些问题。

我向构造函数声明状态：

"docList" : {
        "docID1" : "docNR1",
             "docID2" : "docNR2",
}

然后我将函数传递给复选框：

constructor(props) {
        super(props);
        this.state = {
         selected: []
}
};

    handleCheckboxClick = (e) => {

        if(e.target.checked){
        this.setState({
            selected: [...this.state.selected, e.target.value],
        },()=>{
            console.log( this.state.selected)
        }); 
        } else {
            let remove = this.state.selected.indexOf(e.target.value);
            this.setState({
                selected: this.state.selected.filter((_, i) => i !== remove)
            },()=>{
                console.log( this.state.selected)
            }) 
        }

    }

从我的控制台中，我得到了：

<Checkbox value={rowData.documentId.toString() + rowData.documentNumber.toString()} onClick={this.handleCheckboxClick} />

基本上，这是docID + docNR组合在一个字符串中。因此，我该如何分隔它们并为每个返回带有两个分隔字符串的对象。

结果不是我所期望的，所以如果有人可以帮我，我会很高兴。谢谢

Answer 1

我将按以下方式使用JSON.stringify()和JSON.parse()：

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

<Checkbox value={JSON.stringify({documentId: rowData.documentId, documentNumber: rowData.documentNumber})} onClick={this.handleCheckboxClick} />

handleCheckboxClick = (e) => {
        let parsedVal = JSON.parse(e.target.value);
        let newDocList = {...this.state.docList};
        if(e.target.checked) {
          newDocList[parsedVal.documentId] = parsedVal.documentNumber;
        } else {
          delete newDocList[parsedVal.documentId];
        }
        this.setState({
            docList: newDocList
        }, ()=>{
            console.log(this.state.docList)
        }); 
    }

Answer 2

您可以使用数据属性-https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

<Checkbox data-docId={rowData.documentId.toString()} data-docNumber={rowData.documentNumber.toString()} onClick={this.handleCheckboxClick} />

在handleCheckboxClick内，您可以在事件对象中获取data的值。

有没有一种方法可以将对象而不是数组发送到后端？ -ReactJS

2 个答案: