如何使用反应加载按钮点击数据

Question

在我下面的代码中，我有一个表，当我 select 单选按钮并单击提交按钮然后加载数据并显示在控制台中。 这可以。

但在我的表中，我的表体中有很多数据。 当我 select 第一行单选按钮然后单击提交按钮，然后加载数据并显示在控制台中。 那也行。 但我再次 select 第二行单选按钮并单击提交按钮，然后我无法获取数据并显示在控制台中。 再次我 select 第三行和 select 单选按钮并单击提交按钮然后我在控制台中获取数据。就像那样

为什么我会变成这样？

class ProvFileRptSearchResult extends React.Component {
constructor(props) {
    super();
  
    this.state = {
        pymtDetails:[],
        data: [],
        rowDetails:[],
        checkbox: false
        
       };
    //    this.handleFile=this.handleFile.bind(this);
         this.handleClick=this.handleClick.bind(this);
   
}
    handleClick() {
        const apiUrl = "https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e";
        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');
      }




render()
    {
        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>
                     {
                     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>
            </table>
            </div>
            <div className="btn-submit" >
                            <button className="btn btn-primary" style={{marginRight:"30px"}}  type="submit" onClick={this.handleClick}>FILE</button>
                               
                        </div>
            
    </div>
        )
    }

Answer 1

您需要对复选框值和输入标签值和 setstate 进行一些更改，您可以找到更改。 以下是有效的代码：

import React from "react";
import ReactDOM from "react-dom";

class Test extends React.Component {
  constructor(props) {
    super();
    this.state = {
      data: [],
      checkbox: 0
    };
  }

  handleClick = () => {
    const apiUrl = "https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e";
    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("not load data!");
    }
  };

  render() {
    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
                    value={this.state.checbox === 1 ? true : false}
                    onChange={(e) => this.setState({ checkbox: 1 })}
                    type="radio"
                    preventDefault
                    name="select"
                  />
                </td>

                <td>dfgrty</td>
                <td>fgfg</td>
                <td>fgfg</td>
                <td>erer</td>
                <td>uuio</td>
              </tr>
              <tr>
                <td>
                  <input
                    value={this.state.checbox === 2 ? true : false}
                    onChange={(e) => this.setState({ checkbox: 2 })}
                    type="radio"
                    preventDefault
                    name="select"
                  />
                </td>

                <td>dfgrty</td>
                <td>fgfg</td>
                <td>fgfg</td>
                <td>erer</td>
                <td>uuio</td>
              </tr>
              <tr>
                <td>
                  <input
                    value={this.state.checbox === 1 ? true : false}
                    onChange={(e) => this.setState({ checkbox: 3 })}
                    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={this.handleClick}
          >
            submit
          </button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

// https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e
// http://codeskulptor-assets.commondatastorage.googleapis.com/assets_clock_minute_arrow.png

Answer 2

您正在做的是，您正在使用单个 state 变量处理数据。

为所有单选按钮取三个单独的变量

并分别处理