Reactjs 在特定条件下通过单击表格展开一行Ant Design table react js

我需要一点帮助

我需要编写代码，使表行仅在其切换处于打开状态时才应展开，而在切换处于关闭状态时不应展开。我使用属性expandRowByClick在单击行时展开行。但这里的问题是，当切换关闭时，它不应该被单击，但现在一个空行将展开。我怎样才能避免呢

有人帮我吗。多谢各位

---

沙盒链接：

只需粘贴此代码。它正在工作。希望这对你有帮助

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Switch } from "antd";

const { Column } = Table;

class EditableTable extends React.Component {
  state = {
    firstRow: false,
    secondrow: false
  };
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [
        {
          key: "0",
          name: "Edward King 0",
          expandable: false
        },
        {
          key: "1",
          name: "Edward King 1",
          expandable: false
        }
      ]
    };
  }
  handleChnage = key => {
    let k = parseInt(key);
    let data = this.state.dataSource;
    let value = data[k].expandable;
    data[k].expandable = !value;
    this.setState({
      dataSource: data
    });
  };

  render() {
    const { dataSource } = this.state;
    return (
      <Table
        bordered
        dataSource={dataSource}
        pagination={false}
        expandRowByClick={true}
        expandable={{
          expandedRowRender: record => (
            <p style={{ margin: 0 }}>{"Here is expandable row"}</p>
          ),
          rowExpandable: record => record.expandable
        }}
      >
        <Column title="name" dataIndex="name" width="30%" editable={true} />
        <Column
          align="right"
          render={(text, record, index) => {
            return <Switch onChange={() => this.handleChnage(record.key)} />;
          }}
        />
      </Table>
    );
  }
}

ReactDOM.render(<EditableTable />, document.getElementById("container"));

---

只需粘贴此代码。它正在工作。希望这对你有帮助

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Switch } from "antd";

const { Column } = Table;

class EditableTable extends React.Component {
  state = {
    firstRow: false,
    secondrow: false
  };
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [
        {
          key: "0",
          name: "Edward King 0",
          expandable: false
        },
        {
          key: "1",
          name: "Edward King 1",
          expandable: false
        }
      ]
    };
  }
  handleChnage = key => {
    let k = parseInt(key);
    let data = this.state.dataSource;
    let value = data[k].expandable;
    data[k].expandable = !value;
    this.setState({
      dataSource: data
    });
  };

  render() {
    const { dataSource } = this.state;
    return (
      <Table
        bordered
        dataSource={dataSource}
        pagination={false}
        expandRowByClick={true}
        expandable={{
          expandedRowRender: record => (
            <p style={{ margin: 0 }}>{"Here is expandable row"}</p>
          ),
          rowExpandable: record => record.expandable
        }}
      >
        <Column title="name" dataIndex="name" width="30%" editable={true} />
        <Column
          align="right"
          render={(text, record, index) => {
            return <Switch onChange={() => this.handleChnage(record.key)} />;
          }}
        />
      </Table>
    );
  }
}

ReactDOM.render(<EditableTable />, document.getElementById("container"));

---

解决方案的Tnx。过去几天我都在休假。所以我推迟了投票解决方案的Tnx。过去几天我都在休假。所以我推迟了投票