放置开关/复选框以及 Ant Design 表 reatc js 的标题

Question

我是反应js的新手。所以我需要你的帮助。我想要一个带有表格标题的开关/复选框。在此沙盒 https://codesandbox.io/s/bold-curie-lyovv?file=/index.js 中，底部开关必须带有表的标题。我该如何移动它？

示例： |Name <switch />|Age <switch />|Address <switch />|

谁能帮我？

Answer 1

确保列标题遵循以下结构：

title: <p>COLUMN_TITLE <Switch defaultChecked onChange={onChange} /></p>

见下文。

const columns = [
{
title: <p>Name <Switch defaultChecked onChange={onChange} /></p>,
dataIndex: "name",
key: "name",
render: (text, record) => (
<div>
<Input
disabled={val}
component="input"
className="ant-input"
type="text"
/>
</div>
)
},
{
title: <p>Age <Switch defaultChecked onChange={onChange} /></p>,
dataIndex: "age",
key: "age",
render: (text, record) => (
<div>
<Input component="input" className="ant-input" type="text" />
</div>
)
},
{
title: <p>Address <Switch defaultChecked onChange={onChange} /></p>,
dataIndex: "address",
key: "address",
render: (text, record) => (
<div>
<Input component="input" className="ant-input" type="text" />
</div>
)
}
];

这样，您的Switch将包含在列标题旁边的表格标题中。以前，您将其包含在列的呈现中。在此处查看更新的沙盒。