如何将 Radio 渲染成 antd Table答案

【问题标题】：How to render Radio into antd Table如何将 Radio 渲染成 antd Table
【发布时间】：2020-01-08 08:56:14
【问题描述】：

我正在尝试将单选按钮渲染到 antd 表的列中，但没有任何成功。

有办法吗？

我也尝试使用带有收音机类型的常规 HTML 输入标记，但没有任何成功。

选项 1：

render: (isService) => (
   <span>
      <input type="radio" checked={isService} />
   </span>
)

选项 2：

render: (isService) => (
   <span>
      <Radio value={isService}></Radio>
   </span>
)

预期结果将是一个表，其中一个列将包含 Radio（我的对象字段之一是布尔值，所以这是我想要显示的方式）。

【问题讨论】：

显示列对象和数据，尝试添加像codesandbox.io/s/styled-antd-react-starter-lt4l5这样的沙箱

标签： reactjs radio-button antd

【解决方案1】：

你需要从render property of Column返回ReactNode。

对于您的示例，您似乎对提供给您的Table 的columns / dataSource 属性有问题。

一个简单的工作示例：

const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street'
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street'
  }
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    render: age => <Radio checked={age >= 40} />
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address'
  }
];

export default function App() {
  return (
    <FlexBox>
      <Table columns={columns} dataSource={dataSource} />
    </FlexBox>
  );
}

【讨论】：

【解决方案2】：

单选按钮作为一个组进行操作，并且在存在两个或多个互斥选项的列表并且用户必须仅选择一个选项时使用。无线电组必须具有相同的名称（“名称”属性的值）。选择该组中的任何单选按钮会自动取消选择同一组中的任何其他选定单选按钮：

<p>Please select your gender:</p>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br>

在您的情况下，您可能需要一个复选框元素。单个独立的复选框元素用于单个二元选项，例如是或否问题：

<label>
  Service
  <input name="service" type="checkbox" checked={isService} onChange={this.handleInputChange} />
</label>

【讨论】：

【解决方案3】：

感谢大家的回答！

我的问题是每列都有一个搜索框，当我从单选按钮的列中删除它时，它出现了！可能 Antd 的搜索选项在添加 Radio/Button 以及简单文本或链接以外的其他内容时存在问题。

【讨论】：