Javascript 如何在选择和获取数据的基础上点击按钮

在我试图做的是，我有一个表的数据，我想在我下面的代码，当我选择复选框，并点击提交按钮，然后调用api和获取的数据，我们如何做这方面的任何帮助

我的代码在这里

我有这个api

当我选中复选框行，然后单击按钮，然后获取数据时，有人能建议如何调用api吗

---

有人能帮我解决这个问题吗？

下面是执行以下操作的代码：-如果选中单选按钮并按下按钮，则从api获取数据

    import React,{useState} from "react";

const Test=()=> {
    const [fetcheddata, setFetchedData]=useState([]);
    const handleClick=async()=>{

        if(document.getElementById("check").checked = true){
        console.log("Checking ");
          await fetch("https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e")
          .then((response) => response.json())
          .then((data) => {
            console.log(data);
            setFetchedData(data);
          });
    
        } 
            else{
                // do anything you want to do if checkbox is not selected :D
                console.log("nothing")
            }
    }
    return (
      <div>
        <div
          className="table-employee"
          style={{ marginTop: "20px", border: " 1.5px solid darkgray" }}
        >
          <table className="table table-hover table-bordered table-sm">
            <thead>
              <tr>
                <th scope="col">Select</th>
                <th scope="col"> LOAD DATE</th>
                <th scope="col"> FILE DATE</th>
                <th scope="col"> SERVICE</th>
                <th scope="col"> PROVISIONER CODE </th>
                <th scope="col"> DESCRIPTION</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <input id="check" type="radio" preventdefault  
                  name="select" />
                </td>
       
                <td>dfgrty</td>
                <td>fgfg</td>
                <td>fgfg</td>
                <td>erer</td>
                <td>uuio</td>
              </tr>
            </tbody>
          </table>
        
        </div>
        <div className="btn-submit">
          <button
            className="btn btn-primary"
            style={{ marginRight: "30px" }}
            // type="submit"
            onClick={handleClick}
          >
            submit
          </button>
          {fetcheddata?.map(i=>{
              return(
                  <>
                  <p>{i.id}</p>
                  <img style={{width:"100px"}}src={i.url} alt="image"/>
                </>
              )
          })}
        </div>
      </div>
    );
  
}
export default Test;

import React，{useState}来自“React”；
常数测试=（）=>{
常量[fetcheddata，setFetchedData]=useState（[]）；
const handleClick=async（）=>{
if（document.getElementById（“check”）.checked=true）{
控制台日志（“检查”）；
等待取回（“https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e")
.then（（response）=>response.json（））
。然后（（数据）=>{
控制台日志（数据）；
setFetchedData（数据）；
});
} 
否则{
//如果未选中复选框，请执行任何操作：D
console.log（“无”）
}
}
返回(
挑选
装货日期
存档日期
服务
供应器代码
描述
dfgrty
fgfg
fgfg
埃勒
乌尤
提交
{fetcheddata？.map（i=>{
返回(
{i.id}

)
})}
);
}
导出默认测试；

---

我已经将您的类组件转换为功能组件（这使事情变得更简单）

有人可以帮我吗