Javascript 使用reactjs如何制作可点击按钮并打开url

我试图做的是在我的代码中，我有一个表，当我选择第一行的单选按钮并单击submit按钮时，url链接打开，加载数据并显示在控制台中。但当我再次选择第二行单选按钮并单击submit按钮时，url并没有打开，也并没有在控制台中显示数据。我再次选择第三行单选按钮，然后单击提交按钮，然后我在控制台中查找数据，并打开url，就像这样，第一次我单击一行，然后查找数据，然后选择另一行，然后不获取数据

我正在尝试做的是，但我不这样做输入单选按钮类型中的问题是什么。是否有任何方法使state.checked始终设置为true

谁能帮我解决这个问题

handleClick() {
        const apiUrl = "http://localhost:9090/PrvFileRpt/getPrvFileData";
        if (this.state.checkbox) {
          fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => {
              this.setState({ data: data });
              console.log("This is your data", data);
              window.open("https://example.com", "_blank");
            })
        } else {
          alert("Data not fetched!");
        }
        // console.log('click');
      }

 <tbody>
                     {
                     this.props.customerDetails.map((type,j)=>{
                        return(
 
                        <tr> 
                        <td ><input type="radio" preventDefault name="select"  key={j}  onClick={(e) =>this.rowSelected(j)} value={this.state.checkbox}
                    onChange={(e) =>
                      this.setState({ checkbox: !this.state.checkbox })
                    }/></td>
                         <td> {type.provis_file_stamp}</td>
                          <td> {type.provis_file_hdrdt}</td>
                          <td> {type.service_code}</td>
                            <td>{type.provisioner_code}</td>
                            <td>{type.provisioner_desc}</td>   
                            
                            </tr>
                        )
                     })
                         
                }

            </tbody>


 <div className="btn-submit" >
                            <button className="btn btn-primary" style={{marginRight:"30px"}}  type="submit" onClick={this.handleClick}>FILE</button>
                               
                        </div>

handleClick（）{
常量apiUrl=”http://localhost:9090/PrvFileRpt/getPrvFileData";
if（this.state.checkbox）{
获取（APIRL）
.then（（response）=>response.json（））
。然后（（数据）=>{
this.setState（{data:data}）；
log（“这是您的数据”，data）；
窗口打开（“https://example.com“，”空白“）；
})
}否则{
警报（“未提取数据！”）；
}
//console.log（'click'）；
}
{
this.props.customerDetails.map（（type，j）=>{
返回(
this.rowSelected（j）}值={this.state.checkbox}
onChange={（e）=>
this.setState（{checkbox:！this.state.checkbox}）
}/>
{type.provisi_file_stamp}
{type.provisi_file_hdrdt}
{type.service_code}
{type.provisioner_code}
{type.provisioner_desc}
)
})
}
文件

您试图使用单个状态值（布尔值）来维护多个组件

这就是在进行后续单击时状态的变化方式

• 单击前-未定义（假设初始值为Falsy）
• 第一次单击-true
• 第二次单击-错误

我假设您对第二、第四、第六等单选按钮有问题

我建议：

• 维护每个单选按钮的单独状态值。这样他们就不会改变彼此的价值观

状态={
复选框：{
radioButton1:false，
radioButton1:false，
radioButton1:false，
}
}

或

• 将状态定义为对象或数组

state={checkbox:[false，false，false]}

用法：

this.setState（{checkbox.radioButton1:！this.state.checkbox.radioButton1}）

this.setState（{checkbox[n]：！this.state.checkbox[n]}）

任何人都可以帮助我，或者有任何关于这方面的建议请查看下面我的答案，我认为这可能会有所帮助。