javascript - 有条件地从父母那里禁用孩子的按钮 - 反应
问题描述
我有一个Paginator
子组件,如果它在第一页上,我想禁用左箭头按钮,如果我在第一页上方,我想再次点击它。与右箭头按钮相同,但页码为 5。
这是我尝试为此解决方案编写的条件:
if (this.state.page <= 1) {
this.setState({
disabledPrev: true
})
} else {
this.setState({
disabledPrev: false
})
}
if (this.state.page >= 5) {
this.setState({
disabledNext: true
})
} else {
this.setState({
disabledNext: false
})
}
但不管我把它放在哪里,它都不起作用。我认为问题在于生命周期方法的错误使用。
这是整个代码:
应用程序.js
import React from 'react';
import './App.css';
import Loading from './components/Loading/Loading';
import Header from './components/Header/Header';
import Table from './components/Table/Table';
import Paginator from './components/Paginator/Paginator';
const BASE_URL = 'https://api.udilia.com/coins/v1/'
export default class App extends React.Component{
constructor(props) {
super(props);
console.log('constructor');
this.state = {
currencies: null,
isDataReady: false,
page : 1,
disabledPrev: false,
disabledNext: false,
}
}
fetchCurrencies = (pageNumber) => {
fetch(`${BASE_URL}cryptocurrencies?page=${pageNumber}&perPage=20`)
.then(res => res.json())
.then(json => json.currencies)
.then(currencies => {
this.setState({
currencies: currencies,
isDataReady: true,
})
});
}
UNSAFE_componentWillMount() {
console.log('will mount', this.state.page);
}
componentDidUpdate() {
console.log('didUpdate', this.state.page);
}
componentDidMount() {
console.log('did mount', this.state.page);
//Here is the conditions
if (this.state.page <= 1) {
this.setState({
disabledPrev: true
})
} else {
this.setState({
disabledPrev: false
})
}
if (this.state.page >= 5) {
this.setState({
disabledNext: true
})
} else {
this.setState({
disabledNext: false
})
}
const {page} = this.state;
this.fetchCurrencies(page);
}
//here is the event handler, I change the page value from here
handlePaginationClick = (direction) => () => {
console.log('clicked', this.state.page);
let page = direction === 'next' ? this.state.page + 1 : this.state.page - 1;
this.setState({page})
this.fetchCurrencies(page);
}
render(){
console.log('render', this.state.page);
return (
!this.state.isDataReady
? <Loading />
: <div className="App">
<Header />
<Table
data={this.state.currencies}
/>
<Paginator
prev={this.handlePaginationClick('prev')}
next={this.handlePaginationClick('next')}
page={this.state.page}
disabledPrev={this.state.disabledPrev}
disabledNext={this.state.disabledNext}
/>
</div>
);
}
}
分页器.js
import React from 'react';
export default function Paginator(props) {
return(
<div>
<button disabled={props.disabledPrev} onClick={() => props.prev()}> ← </button>
<span>page {props.page} of 10</span>
<button disabled={props.disabledNext} onClick={() => props.next()}> → </button>
</div>
)
}
解决方案
您不需要两个状态变量来处理左右箭头。
将 Paginator 组件修改为如下所示:
import React from "react";
export default function Paginator({ page, min = 1, max = 5 }) {
return (
<div>
<button disabled={page <= min} onClick={() => props.prev()}>
←
</button>
<span>page {props.page} of 10</span>
<button disabled={page >= max} onClick={() => props.next()}>
→
</button>
</div>
);
}
传递min
和max
值给它。
<Paginator
prev={this.handlePaginationClick("prev")}
next={this.handlePaginationClick("next")}
page={this.state.page}
min={1}
max={5}
/>
推荐阅读
- python - type() 调用导致“int object is not callable”错误
- google-apps-script - 通过 Google 脚本更新星期几
- javascript - 在 React.js 中获取两个日期之间的天数差异
- servicestack - 如何使用 Servicestack 缓存内部服务调用
- vb.net - 兑换 @
- xslt - disable-output-escaping="yes" in XSLT 1.0 is not working for
- java - Deltaspike 存储库事务提交,但 Java SE 中的 DB 中没有任何内容
- delphi - MouseDown 上的光标不改变
- c++ - *array[] 和 array[] 有什么区别?
- javascript - 在上传图像时以黑白绘制图像(在画布中)