reactjs - 在特定条件下通过单击表格展开一行 Ant Design table react js
问题描述
我需要一点帮助。
我需要编写代码,以使表格行仅在切换打开时才应展开,而在切换关闭时不应展开。单击该属性时,我已使用该属性expandRowByClick
来展开一行。但这里的问题是,当切换关闭时,它不应该是可点击的,但现在会展开一个空行。我怎样才能避免它?
任何人都帮帮我。谢谢你。
沙盒链接: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"));
推荐阅读
- firebase - Firebase 托管配置,重写除一个 url 之外的所有内容
- java - 使用 SpringIntegration Java DSL 将消息发送到特定的 RabbitMQ 队列
- ipython - 我可以从 IPython.display.Markdown 获取 html 字符串吗?
- ios - 如何比较不同数组的2个元素?
- windows - 从 Windows 任务管理器启动 R 子进程失败
- python - 张量评估错误
- android-studio - 由于尝试生成签名的 apk,Android Studio 将不会调试(仅构建)
- html - 如何在不影响任何其他样式的情况下从我的按钮中删除轮廓
- naivebayes - 朴素贝叶斯概率公式
- c# - 如何为类中的方法编写单元测试但不调用C#中的类中的构造函数