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

Question

我想要做的是在我的代码中我有一个表，当我在第一行 select 单选按钮并单击提交按钮然后 url 链接打开并加载数据并显示在控制台中。 但是当我再次 select 第二行单选按钮并单击提交按钮时，url 未打开且未在控制台中显示数据。 再次我 select 第 3 行单选按钮然后单击提交按钮然后我在控制台中获取数据并打开 url 就像这意味着第一次我点击一行然后我点击数据然后我 Z99938Z49 另一个数据行然后没有得到

我尝试做的是，但我不这样做输入单选按钮类型中的问题是什么。是否有任何方法可以使 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>

Answer 1

您正在尝试使用单个 state 值（布尔值）来维护多个组件。

这就是 state 在您进行后续点击时的变化方式。

• 点击前 - 未定义（假设初始值为 Falsy）
• 首次点击 - 真
• 第二次点击 - 假...

我假设您在使用第二个、第四个、第六个等单选按钮时遇到问题。

我建议：

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

   state = {
     checkbox: {
       radioButton1: false,
       radioButton1: false,
       radioButton1: false,
     }
   }

或者

• 将您的 state 定义为 object 或数组

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

用法：

   this.setState({ checkbox.radioButton1: !this.state.checkbox.radioButton1 })

   this.setState({ checkbox[n]: !this.state.checkbox[n] })