使用 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] })