javascript - 在选中单选按钮的情况下处理警报事件，反应 JS

Question

这是我的疑问，必须在选中单选按钮的情况下处理警报事件，如果未选中单选按钮，则可以在没有任何警告或警报的情况下删除该行

下面的程序确实有一个带有添加按钮的表格，当单击该按钮时，该按钮会在表格中添加一行。并在行内删除特定行的删除按钮。

但问题是，如果在特定行中单击单选按钮，则该行不应删除，并且应显示单击单选按钮的警报框！

{import header}
class App extends React.Component {
  state = {
    rows: [{}]
  };
  handleChange = idx => e => {
    const { name, value } = e.target;
    const rows = [...this.state.rows];
    rows[idx] = {
      [name]: value
    };
    this.setState({
      rows
    });
  };
  handleAddRow = () => {
    const item = {
      name: "",
      mobile: ""
    };
    this.setState({
      rows: [...this.state.rows, item]
    });
  };
  handleRemoveRow = () => {
    this.setState({
      rows: this.state.rows.slice(0, -1)
    });
  };
  handleRemoveSpecificRow = (idx) => () => {
    const rows = [...this.state.rows]
    rows.splice(idx, 1)
    this.setState({ rows })
  }
  render() {
    return (
              <table
                className="table table-bordered table-hover"
                id="tab_logic"
              >
                
                <tbody>
                  {this.state.rows.map((item, idx) => (
                    <tr id="addr0" key={idx}>
                      {/* <td>{idx}</td> */}
                      <td>
                        <input
                          type="text"
                          name="name"
                          value={this.state.rows[idx].name}
                          onChange={this.handleChange(idx)}
                          className="form-control"
                        />
                      </td>
                      <td>
                        <input
                          type="radio"
                          value={this.state.rows[idx].mobile}
                          onChange={this.handleChange(idx)}
                          className="form-control"
                        />
                      </td>
                      <td>
                        <Button
                          className="btn btn-sm"
                          onClick={this.handleRemoveSpecificRow(idx)}
                        >
                          Remove
                        </Button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>           
    );
  }
}

提前谢谢了！注意单选按钮代码

标签： javascripthtmlreactjsreact-bootstrapreact-bootstrap-table