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

问题描述

我要这样做:每一行是一个Radio组，每个单元格是一个Radio按钮，如图所示:

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

广播"组的示例如下:

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

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

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

我当前的代码是:

  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.

这是代码示例

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表中使用广播组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！