在特定条件下通过单击表格展开一行Ant Design table react js [英] Expand a row by click of table on a certain condition Ant Design table react js
问题描述
我需要一点帮助.
我需要编写代码,使表格行仅在打开切换时才扩展,而在关闭切换时则不扩展.单击属性时,我已经使用属性expandRowByClick
展开了一行.但是这里的问题是,当切换开关关闭时,它不应该是可单击的,但是现在会展开一个空行.我该如何避免呢?
I need to write the code such that the table row should expand only when it's toggle is on when the toggle is off it should not expand. I have used the property expandRowByClick
to expand a row when it is clicked. But here the problem is when the toggle is off it should not clickable, but right now an empty row will expand. How can I avoid it?
任何人都可以帮助我.谢谢.
Anyone help me out. Thank you.
SandBox链接: https://codesandbox.io/s/purple-sun-1rtz1?file=/index.js
SandBox link: https://codesandbox.io/s/purple-sun-1rtz1?file=/index.js
推荐答案
只需粘贴此代码.这是工作 .希望这会对您有所帮助.
just paste this code . it is working . Hope this'll help you .
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"));
这篇关于在特定条件下通过单击表格展开一行Ant Design table react js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!