如何将收音机渲染到antd表中

Question

我试图将单选按钮呈现到antd表的列中，但没有成功。

有办法吗？

我尝试过将常规HTML输入标签与无线电类型一起使用也没有成功。

选项1：

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

选项2：

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

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

Answer 1

您需要从Column render属性返回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>
  );
}

Answer 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> 

Answer 3

感谢所有的答案！

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