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

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

以您的示例为例，看来您为columns提供的dataSource / Table属性存在问题。

一个简单的工作示例：

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以及除简单文本或链接之外的其他内容时会出现问题。

如何将Radio渲染到antd表中

3 个答案: