Question

下面的Reactjs代码可以通过显示用户记录来正常工作。

现在，我想在单击查看按钮但模态显示空记录时在Bootstrap Modal上显示每个记录

我已经集成了Bootstrap Modal，下面是我编写的代码，以帮助在模式上显示记录，但是没有运气

//单击“查看”按钮时以模态显示数据

viewData() {
  this.see=this.state.rec;
alert(this.see);

 }

还有其他出路吗？

这是屏幕截图，显示了模式视图中的空记录

这是完整的代码

<!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 class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

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

        <!-- Modal body -->
        <div class="modal-body">



Name: {this.see.name}<br>
Age:  {this.see.age}<br>
        </div>

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

      </div>

  </div>

</div>



<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" },
   ],    
   limit : 20
};
   this.viewData = this.viewData.bind(this);


 }



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

viewData() {
  this.see=this.state.rec;
alert(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>

   </div>;
 }
}


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


</script>

   </body>
</html>

更新

这是我基于Stundji爵士解决方案的更新，如果是的话，我所做的是将模式类组件导入到应用程序组件中

但显示错误 未捕获的ReferenceError：未定义组件。 任何进一步的帮助将不胜感激...

Application.jsx

import React, { Component, Fragment } from "react";
//import React from 'react';
import { Link } from 'react-router-dom';

import Modal from './Modal';

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" },
   ],    
   limit : 20
};
   this.viewData = this.viewData.bind(this);


 }

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

viewData() {
  this.see=this.state.rec;
alert(this.see);

 }


    render() {
        //const { pg1, pgs1 } = this.props;
        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>
<Modal see={this.see}/> // pass your data as props to Modal component

   </div>
        );
    }
}

这是 Modal.jsx

import React from 'react';


class Modal extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (    
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Show Records in Modal</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          Name: {this.props.see.name} // get your data from props
          Age:  {this.props.see.age}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

      </div>

  </div>

</div>
        );
    }
}

Answer 1

您将必须创建一个React类，并将Bootstrap模态html放入React类render（）方法中。

示例：

  class Modal extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (    
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

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

        <!-- Modal body -->
        <div class="modal-body">
          Name: {this.props.see.name}<br> // get your data from props
          Age:  {this.props.see.age}<br>
        </div>

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

      </div>

  </div>

</div>
        );
    }
}

然后在您的应用程序组件中：

 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>
    <Modal see={this.see}/> // pass your data as props to Modal component
   </div>;
 }
}

Or you can use this library https://react-bootstrap.github.io/components/modal/

React.js在Bootstrap Modal View弹出窗口中不显示记录

1 个答案: