如何在 Antd 表中使用 Radio 组? [英] How to use Radio groups inside Antd table?

问题描述

我想这样做:每一行是一个单选组，每个单元格是一个单选按钮，如图:

Radio 组的示例如下:

<Radio value={1}>A</Radio><Radio value={2}>B</Radio><Radio value={3}>C</Radio><Radio value={4}>D</Radio></Radio.Group>

但是我不知道如何添加一个 Radio 组来包装每个 Antd 表行?

我当前的代码是:

 renderTable() {让列 = [];列推({标题: ''，数据索引:'名称'，键:'名称'，宽度:'45vw'，},);this.props.task.options.forEach((option, i) => {列推({标题:选项，数据索引:选项，键:选项，className: '选择表列',渲染:x =>{返回 <无线电值={0}/>},},);});让 rowHeaders = [];this.props.task.extras.forEach((extra, i) => {rowHeaders.push({名称":`${i + 1}.${额外}`}，);});//如何在 antd/Ant Design 中将 className 传递给表的 Header?//https://stackoverflow.com/questions/51794977/how-can-i-pass-a-classname-to-the-header-of-a-table-in-antd-ant-designconst tableStyle = css({'&头>t >th':{文本对齐:'居中'，},'&身体 >t >td':{文本对齐:'居中'，},'&身体 >t >TD:第一个孩子':{文本对齐:'左'，},});返回 (<div><Table className={tableStyle} columns={columns} dataSource={rowHeaders} size="middle" 边框分页={false}/>

);}

解决方案

我不认为每行都可以使用单选组，但是您可以通过传统方式实现.

这是代码示例

 class App extends React.Component {状态 = {任务: { 选项: [1, 2, 3, 4, 5], 额外: [6, 7, 8, 9, 10] },选择:{}};onRadioChange = e =>{让名称 = e.currentTarget.name;让值 = e.currentTarget.value;this.setState({...这个.状态，选择:{ ...this.state.selected，[名称]:值}});};onSubmit = () =>{控制台日志(this.state.selected)；this.setState({...这个.状态，选择:{}});};使成为() {让列 = [];列.推({标题: ""，数据索引:名称"，键:名称"，宽度:45vw"});this.state.task.options.forEach((option, i) => {列.推({标题:选项，键:选项，渲染:行 =>{返回 (<输入类型=收音机"选中={this.state.selected[row.name] == option}onChange={this.onRadioChange}名称={row.name}值={选项}/>);}});});让 rowHeaders = [];this.state.task.extras.forEach((extra, i) => {rowHeaders.push({ name: `${i + 1}.${extra}` });});返回 (<div><Button onClick={this.onSubmit} type="primary">{" "}提交</按钮><表列={列}数据源={rowHeaders}大小=中"有边框的分页={假}/><Tag color="red">选择的选项</Tag><br/>{JSON.stringify(this.state.selected)}

);}}

I want to do this: each row is a Radio group, each cell is a Radio button, like the picture:

An example of Radio group is like:

<Radio.Group onChange={this.onChange} value={this.state.value}>
        <Radio value={1}>A</Radio>
        <Radio value={2}>B</Radio>
        <Radio value={3}>C</Radio>
        <Radio value={4}>D</Radio>
      </Radio.Group>

But I don't know how to add a Radio group to wrap each Antd table row?

My current code is:

  renderTable() {
    let columns = [];
    columns.push(
      {
        title: '',
        dataIndex: 'name',
        key: 'name',
        width: '45vw',
      },
    );

    this.props.task.options.forEach((option, i) => {
      columns.push(
        {
          title: option,
          dataIndex: option,
          key: option,
          className: 'choice-table-column',
          render: x => {
            return <Radio value={0} />
          },
        },
      );
    });

    let rowHeaders = [];
    this.props.task.extras.forEach((extra, i) => {
      rowHeaders.push(
        {"name": `${i + 1}. ${extra}`},
      );
    });

    // How can I pass a className to the Header of a Table in antd / Ant Design?
    // https://stackoverflow.com/questions/51794977/how-can-i-pass-a-classname-to-the-header-of-a-table-in-antd-ant-design
    const tableStyle = css({
      '& thead > tr > th': {
        textAlign: 'center',
      },
      '& tbody > tr > td': {
        textAlign: 'center',
      },
      '& tbody > tr > td:first-child': {
        textAlign: 'left',
      },
    });

    return (
      <div>
        <Table className={tableStyle} columns={columns} dataSource={rowHeaders} size="middle" bordered pagination={false} />
      </div>
    );
  }

解决方案

I don't think it is possible to use radio group for each row, however you can achieve it in a traditional way.

Here is code sample

https://codesandbox.io/s/goofy-benz-12kv5

 class App extends React.Component {
  state = {
    task: { options: [1, 2, 3, 4, 5], extras: [6, 7, 8, 9, 10] },
    selected: {}
  };

  onRadioChange = e => {
    let name = e.currentTarget.name;
    let value = e.currentTarget.value;
    this.setState({
      ...this.state,
      selected: { ...this.state.selected, [name]: value }
    });
  };

  onSubmit = () => {
    console.log(this.state.selected);
    this.setState({
      ...this.state,
      selected: {}
    });
  };

  render() {
    let columns = [];
    columns.push({
      title: "",
      dataIndex: "name",
      key: "name",
      width: "45vw"
    });

    this.state.task.options.forEach((option, i) => {
      columns.push({
        title: option,
        key: option,
        render: row => {
          return (
            <input
              type="radio"
              checked={this.state.selected[row.name] == option}
              onChange={this.onRadioChange}
              name={row.name}
              value={option}
            />
          );
        }
      });
    });

    let rowHeaders = [];
    this.state.task.extras.forEach((extra, i) => {
      rowHeaders.push({ name: `${i + 1}.${extra}` });
    });

    return (
      <div>
        <Button onClick={this.onSubmit} type="primary">
          {" "}
          Submit
        </Button>
        <Table
          columns={columns}
          dataSource={rowHeaders}
          size="middle"
          bordered
          pagination={false}
        />

        <Tag color="red">Selected options</Tag>
        <br />

        {JSON.stringify(this.state.selected)}
      </div>
    );
  }
}

这篇关于如何在 Antd 表中使用 Radio 组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！