每次单击模态弹出按钮时，Reactjs 仅显示第一条记录

Question

我在 reactjs 数组中有 9 条记录，每条记录都有自己的 Bootstrap 模态视图按钮。

{ "name" : "Tony", "Age" : "18"},
     { "name" : "John", "Age" : "21" },
     { "name" : "Luke", "Age" : "78" },
     { "name" : "Mark", "Age" : "90" },
     { "name" : "Jame", "Age" : "87" },
     { "name" : "Franco", "Age" : "34" },
     { "name" : "Franco", "Age" : "34" },
     { "name" : "Biggard", "Age" : "19" },
     { "name" : "tom", "Age" : "89" },

当我点击第一个模态视图按钮时，我在模态视图中显示了正确的记录 (Name=Tony, Age=18)。

当我单击第二条记录模态视图按钮时，我应该在模态中显示第二条记录 (Name=John, Age=21) 但相反，它显示第一条记录是 (Name=Tony, Age=18)。因此，无论单击哪个视图按钮，模态视图都会显示第一条记录。

这里是全部代码

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>


<style>

.pic{
background:blue; color:white;}
</style>


<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>




  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div id="app"></div>

<script type="text/babel">
class Application extends React.Component {
 constructor(props) {
   super(props)

   this.state = {rec : [
     { "name" : "Tony", "Age" : "18"},
     { "name" : "John", "Age" : "21" },
     { "name" : "Luke", "Age" : "78" },
     { "name" : "Mark", "Age" : "90" },
     { "name" : "Jame", "Age" : "87" },
     { "name" : "Franco", "Age" : "34" },
     { "name" : "Franco", "Age" : "34" },
     { "name" : "Biggard", "Age" : "19" },
     { "name" : "tom", "Age" : "89" },
   ],
};
   this.viewData = this.viewData.bind(this);


 }

// Display Data in a Modal when View button is Clicked

viewData() {
  //this.see=this.state.rec[0].name;
console.log(this.see);

 }


render() {


return <div className="container">

     <div>
       <h3>List of Records</h3>
       <ul>
         {this.state.rec.map((obj, i) => 
             <li key={i}>{obj.name} - {obj.Age}     <button type="button" onClick={this.viewData} className="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">view from Modal</button></li>


         )}
       </ul>

     </div>


//start Bootstrap modal

 <div className="modal" id="myModal">
    <div className="modal-dialog">
      <div see={this.see} className="modal-content">

        <div className="modal-header">
          <h4 className="modal-title">Show Records in Modal</h4>
          <button type="button" className="close" data-dismiss="modal">&times;</button>
        </div>

        <div className="modal-body">


Name:  {this.state.rec[0].name} <br />

Age:  {this.state.rec[0].Age} <br />

        </div>

        <div className="modal-footer">
          <button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

      </div>

  </div>

   </div>
// End Bootstrap Modal

     </div>;




 }
}


ReactDOM.render(<Application />, document.getElementById('app'));


</script>

   </body>
</html>

Answer 1

您需要将属性添加到您的状态 currentRec，以跟踪您单击的数组项。

您还需要更改 viewData() 以接受已单击的数组项的索引。获得此值后，可以将其设置为 currentRec 以了解要显示的数组项。

之后，您可以使用此 currentRec 在模态主体中显示当前数组项，而不是始终通过 [0] 返回数组中的第一个元素，这就是问题所在。

class Application extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      rec: [
        { name: "Tony", Age: "18" },
        { name: "John", Age: "21" },
        { name: "Luke", Age: "78" },
        { name: "Mark", Age: "90" },
        { name: "Jame", Age: "87" },
        { name: "Franco", Age: "34" },
        { name: "Franco", Age: "34" },
        { name: "Biggard", Age: "19" },
        { name: "tom", Age: "89" }
      ],
      currentRec: undefined
    };
    this.viewData = this.viewData.bind(this);
  }

  // Display Data in a Modal when View button is Clicked

  viewData = (i) => {
    this.setState({ currentRec: i });
    console.log(`Selected record index: ${i}`);
  }

  render() {
    return (
      <div className="container">
        <div>
          <h3>List of Records</h3>
          <ul>
            {this.state.rec.map((obj, i) => (
              <li key={i}>
                {obj.name} - {obj.Age}{" "}
                <button
                  type="button"
                  onClick={() => { this.viewData(i); }}
                  className="btn btn-primary btn-sm"
                  data-toggle="modal"
                  data-target="#myModal"
                >
                  view from Modal
                </button>
              </li>
            ))}
          </ul>
        </div>
        <div className="modal" id="myModal">
          <div className="modal-dialog">
            <div see={this.see} className="modal-content">
              <div className="modal-header">
                <h4 className="modal-title">Show Records in Modal</h4>
                <button type="button" className="close" data-dismiss="modal">
                  &times;
                </button>
              </div>

              {this.state.currentRec !== undefined && 
                  <div className="modal-body">
                    Name: {this.state.rec[this.state.currentRec].name} <br />
                    Age: {this.state.rec[this.state.currentRec].Age} <br />
                  </div>}

              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-danger"
                  data-dismiss="modal"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Application/>,
  document.body
);

<div class="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

每次单击模态弹出按钮时，Reactjs 仅显示第一条记录

Reactjs shows only first record each time a modal pop up button is clicked

reactjs