React开发：实现删除确认弹窗及获取选中单选框ID

核心修改说明 #

• 单选框绑定修复：给所有单选框设置统一的name="FeatureID"和对应value={item.FeatureID}，确保选中时能正确将FeatureID存入组件状态，同时添加checked属性回显选中状态
• 添加确认对话框：新增showConfirmDialog状态控制弹窗显示，点击删除按钮先触发确认，用户确认后再执行删除
• 重构提交逻辑：拆分提交流程，先检查是否选中项，再弹确认框；确认后发起删除请求，成功后刷新列表
• 修复表格结构：移除<tr>外层的<div>，因为<tbody>只能直接包含<tr>元素，避免DOM结构错误
• 完善加载状态：添加加载中的提示文本，提升用户体验

完整实现代码 #

import React from "react";

export class DeleteFeature extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      FeatureID: "",
      FeatureTextPlain: "",
      Feature: [],
      loading: true,
      showConfirmDialog: false // 控制确认对话框显示
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleDeleteClick = this.handleDeleteClick.bind(this);
    this.confirmDelete = this.confirmDelete.bind(this);
    this.cancelDelete = this.cancelDelete.bind(this);
  }

  componentDidMount() {
    this.DisplayFeatures();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.key_id !== this.props.key_id) {
      console.log(`key_id: ${this.props.key_id}`);
      this.DisplayFeatures();
    }
  }

  DisplayFeatures() {
    // 替换为你的实际请求地址
    const REQUEST_URL = "";
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          Feature: data,
          loading: false
        });
      })
      .catch((error) => console.error("Error:", error));
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  // 点击删除按钮触发，先校验选中状态
  handleDeleteClick(event) {
    event.preventDefault();
    if (!this.state.FeatureID) {
      alert("请先选择要删除的项");
      return;
    }
    this.setState({ showConfirmDialog: true });
  }

  // 确认删除：发起删除请求并刷新列表
  confirmDelete() {
    // 替换为你的删除接口地址
    const REQUEST_URL = "";
    fetch(REQUEST_URL, {
      method: "POST",
      body: JSON.stringify({ FeatureID: this.state.FeatureID }),
      headers: { "Content-Type": "application/json" }
    })
      .then((response) => response.json())
      .then(() => {
        this.DisplayFeatures();
        this.setState({ FeatureID: "", showConfirmDialog: false });
      })
      .catch((error) => {
        console.error("Error:", error);
        this.setState({ showConfirmDialog: false });
      });
  }

  // 取消删除：关闭对话框
  cancelDelete() {
    this.setState({ showConfirmDialog: false });
  }

  render() {
    if (this.state.loading) {
      return <div>加载中...</div>;
    }

    // 自定义确认弹窗样式
    const confirmDialog = this.state.showConfirmDialog ? (
      <div style={{
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        padding: '20px',
        backgroundColor: 'white',
        border: '1px solid #ccc',
        borderRadius: '4px',
        zIndex: 1000
      }}>
        <p>确定要删除选中的项吗？</p>
        <button onClick={this.confirmDelete}>确定</button>
        <button onClick={this.cancelDelete} style={{ marginLeft: '10px' }}>取消</button>
      </div>
    ) : null;

    return (
      <div>
        <form onSubmit={this.handleDeleteClick}>
          <table width="100%" cellpadding="0" cellspacing="0" border="1">
            <tbody>
              {this.state.Feature.map((item, index) => (
                <tr key={item.FeatureID || index}>
                  <td width="5%">
                    <input
                      type="radio"
                      name="FeatureID"
                      id={item.FeatureID}
                      value={item.FeatureID}
                      checked={this.state.FeatureID === item.FeatureID}
                      onChange={this.handleChange}
                    />
                  </td>
                  <td width="68%" valign="top" align="left">
                    {item.featureTextPlain}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <button type="submit" name="submit">Delete</button>
        </form>
        {confirmDialog}
      </div>
    );
  }
}

export default DeleteFeature;

内容的提问来源于stack exchange，提问作者TestUser