是否可以在 popconfirm 中放置一个单选按钮，并且仅当用户在 popconfirm 上单击确认时才检查单选按钮？

Question

我有一组单选按钮，我试图将这些单选按钮包裹在 popconfirm 元素周围，以便仅当用户在 popconfirm 上选择确认时才会选中单选按钮。在我下面的代码中，我通过将第一个无线电元素包装在 popconfirm 中开始摆弄这个想法。

问题是当我点击一个单选按钮时，在我确认或取消 popconfirm 之前它会被检查。我想我需要阻止检查单选按钮，然后从 popconfirm 的 onConfirm 回调中以编程方式检查它。遗憾的是我找不到任何这样的例子。

  <Radio.Group value={selectedRadio} onChange={this.onChangeRadioButton}>
    <Popconfirm
    title={this.intl.formatMessage({ id: 'common.deviceSelection' })}
    onConfirm={() => console.log('hi')}
    okText={this.intl.formatMessage({ id: 'common.confirm' })}
    cancelText={this.intl.formatMessage({ id: 'common.cancel' })}
    >
      <Radio value={actions.restartApp}>
        <IntlMessages id="configuration.bedsCarts.actions.restartApp" />
      </Radio>
    </Popconfirm>
      <Radio value={actions.restartOs}>
        <IntlMessages id="configuration.bedsCarts.actions.restartOs" />
      </Radio>
      <Radio value={actions.restartHardware}>
        <IntlMessages id="configuration.bedsCarts.actions.restartHardware" />
      </Radio>
      <Radio value={actions.updateVersion}>
        <IntlMessages id="configuration.bedsCarts.actions.updateVersion" />
      </Radio>
      <Radio value={actions.updateNetworkCertificate}>
        <IntlMessages id="configuration.bedsCarts.actions.updateNetworkCertificate" />
      </Radio>
      <Radio value={actions.moveSystemDevices}>
        <IntlMessages id="configuration.bedsCarts.actions.moveSystemDevices" />
      </Radio>
  </Radio.Group>

Answer 1

我想我可以你手动编写Popconfirm处理逻辑。例如：

创建一个变量来跟踪 Popconfirm 的状态。
如果按下需要确认的按钮，仅当用户单击同意按钮时才设置 selectedRadio 的值。
如果用户确认操作，则设置 selectedRadio 并将 isConfirmed 重置为 false。

import React, { useState } from "react";
import { Radio, Popconfirm } from "antd";

export const MyComponent = () => {
  // 1
  const [isConfirmed, setIsConfirmed] = useState(false);
  const [selectedRadio, setSelectedRadio] = useState();

  return (
    <Radio.Group
      value={selectedRadio}
      onChange={(e) => {
        // 2
        if (!isConfirmed && e.target.value === "actions.restartApp") {
          return;
        }

        setSelectedRadio(e.target.value);
        // 3
        setIsConfirmed(false);
      }}
    >
      <Popconfirm
        title={"common.deviceSelection"}
        onConfirm={() => {
          setIsConfirmed(true);
          setSelectedRadio("actions.restartApp");
        }}
        okText={"common.confirm"}
        cancelText={"common.cancel"}
      >
        <Radio
          value={"actions.restartApp"}
          onClick={(e) => {
            console.log(isConfirmed);
            if (!isConfirmed) {
              e.preventDefault();
              return;
            }
          }}
        >
          <div>configuration.bedsCarts.actions.restartApp</div>
        </Radio>
      </Popconfirm>
      <Radio value={"actions.restartOs"}>
        <div>configuration.bedsCarts.actions.restartOs1</div>
      </Radio>
      <Radio value={"actions.restartHardware"}>
        <div>configuration.bedsCarts.actions.restartOs2</div>
      </Radio>
      <Radio value={"actions.updateVersion"}>
        <div>configuration.bedsCarts.actions.restartOs2</div>
      </Radio>
      <Radio value={"actions.updateNetworkCertificate"}>
        <div>configuration.bedsCarts.actions.restartOs4</div>
      </Radio>
      <Radio value={"actions.moveSystemDevices"}>
        <div>configuration.bedsCarts.actions.restartOs5</div>
      </Radio>
    </Radio.Group>
  );
};

演示：https://codesandbox.io/s/antd-reproduction-template-forked-6h5zp?file=/MyComponent.jsx

是否可以在 popconfirm 中放置一个单选按钮，并且仅当用户在 popconfirm 上单击确认时才检查单选按钮？

Is it possible to put a radio button inside a popconfirm and have the radio button get checked only if the user clicks confirm on the popconfirm?

antd