Question

我使用下面的代码通过 Reactjs 将信息显示到数据库中。当我单击下一步按钮时，它起作用。没有什么要添加上一个按钮。这就是尝试做的事情。

在“第一次”数据加载中，我需要禁用“上一个”按钮，在“下一步”数据加载中，我需要启用“上一个”按钮。问题在于同时启用和禁用上一个按钮。

<!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>

<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 : 2
};
   this.next = this.next.bind(this);
   this.previous = this.previous.bind(this);

 }


next() {
   const recLength = this.state.rec.length;
   const currentLimit = this.state.limit;
   if (currentLimit < recLength) {

      this.setState({ limit: currentLimit + 2 });
   }

 }


previous() {
   const recLength = this.state.rec.length;
   const currentLimit = this.state.limit;
   if (currentLimit < recLength) {

      this.setState({ limit: currentLimit - 2 });
   }
}


render() {

//let prevLink = parseInt( 2) - 1;

//let prevRec = 2;
const prevRec = this.state.rec.length;


   return <div className="container">

     <div>
       <h3>List of Records</h3>
       <ul>
         {this.state.rec.slice(0,this.state.limit).map((obj, i) => 
             <li key={i}>{obj.name} - {obj.Age}</li>
         )}
       </ul>
     </div>



                <ul className="pager">

<li>
                        {prevRec == 2 ? // Disable previous button if showing the first two loaded Data
                            <a >Disabled Previous</a>
                            :
                            <span>Disabled Previous </span>
                        }
                    </li>





                    <li>
                        {prevRec > 2 ? // Enable Active Previous button on next data load
                            <a onClick={this.previous}>Enable Previous </a>
                            :
                            <span>Enable Previous</span>
                        }
                    </li>


<a  onClick={this.next}>
          Next
      </a> 
                </ul>


   </div>;
 }
}


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


</script>

   </body>
</html>

Answer 1

这是我解决问题的方法。我首先检查数组中的记录，发现我已经有9条记录然后我必须按照

获取数组中记录的长度

const prevRec = this.state.rec.length;

最后，下面的代码解决了我的问题

const prevRec = const prevRec = this.state.rec.length;


{prevRec <= 9 &&  // Disable Previous if records in the array is less than or equal to 9
        <h2>
         <a>Disable Previous</a>
        </h2>
      }

{prevRec > 9 &&
        <h2>
         <a onClick={this.previous}>Enable Previous</a>
        </h2>
      }

通过Reactjs

1 个答案: