我需要一点帮助。
我需要编写代码,以便表行仅在切换打开时才展开,当切换关闭时,表行不应展开。我已使用该房产expandRowByClick
单击时展开行。但这里的问题是,当切换关闭时,它不应该可单击,但现在空行将会展开。我怎样才能避免它?
任何人都可以帮帮我。谢谢。
沙盒链接:https://codesandbox.io/s/purple-sun-1rtz1?file=/index.js https://codesandbox.io/s/purple-sun-1rtz1?file=/index.js
只需粘贴此代码即可。这是工作 。希望这会对您有所帮助。
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"));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)