单击单行高亮显示React表。禁用多选

Question

我正在研究React表中的小功能添加，编辑，删除功能。 我的代码正在运行。 我的问题是，如果用户单击另一行，则会同时选中该行，但不会禁用先前选择的行。基本上，用户可以一次选择一行。禁用多项选择。

此外，如果任何人都可以查看我的添加，更新，删除功能，那就太好了。无论是正确的方法。

Running Code

Answer 1

固定

  getTrProps={(state, rowInfo) => {
        if (rowInfo && rowInfo.row) {
          return {
            onClick: e => {
              console.log("inside");

              if (rowInfo.index != this.state.rowEdit) {
                this.setState({
                  rowEdit: rowInfo.index,
                  selectedRowIndex: rowInfo.original,
                  selectionChanged: this.state.selectionChanged
                    ? false
                    : true
                });
              } else {
                this.setState({
                  rowEdit: null
                });
              }
              console.log(rowInfo.index);
              console.log(this.state.rowEdit);
            },
            style: {
              background:
                rowInfo.index === this.state.rowEdit ? "#00afec" : "white",
              color:
                rowInfo.index === this.state.rowEdit ? "white" : "black"
            }
          };
        } else {
          return {};
        }
      }}