如何將收音機渲染到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以及除簡單文本或鏈接之外的其他內容時會出現問題。