我有一個包含三個頁面的專案，第一個擁有索引號“0”，第二個擁有索引號“1”，第三個擁有索引號“2”。
我有一個 Next 按鈕，我有一個 Preview 按鈕，我使用了一種動態方法來創建一個按鈕，該按鈕只是根據傳遞的地址更改其地址，
我想從第一頁隱藏“上一頁”按鈕，我想從最后一頁隱藏“下一頁”按鈕。
我該如何解決這個問題？
import { Button } from '@chakra-ui/button';
import React from 'react';
export const StepperButton: React.FC<{ title: string, num: number; onClick: (...args: any) => void }> = ({ title, num, onClick }) => {
const [show, setShow] = React.useState(false);
const disabledButton = () => {
if (title === 'Previous' && num === 0) {
return true;
}
}
const hideButton = () => {
if (title === 'Next' && num === 2 || title === 'Previous' && num === 0) {
return false;
}
}
return <>
<Button
style={{
width: '244.71px',
height: '41.41px',
backgroundColor: '#FF8C1E',
borderRadius: '8px',
fontWeight: '600',
fontSize: '14px',
lineHeight: '21px',
color: '#FFFFFF',
textTransform: 'uppercase'
}}
isDisabled={disabledButton()}
// onClick={()=>{ onClick; onOpen; }}
onClick={() => { onClick(); hideButton(); }}
>
{title}</Button>
</>
}
uj5u.com熱心網友回復：
您可以在return. 像那樣。
return <>
{ (num === 0 && title === "Previous") || (num === 2 && title === "Next")
?
""
:
(
<Button
style={{
width: '244.71px',
height: '41.41px',
backgroundColor: '#FF8C1E',
borderRadius: '8px',
fontWeight: '600',
fontSize: '14px',
lineHeight: '21px',
color: '#FFFFFF',
textTransform: 'uppercase'
}}
isDisabled={disabledButton()}
// onClick={()=>{ onClick; onOpen; }}
onClick={() => { onClick(); hideButton(); }}
>
{title}</Button>
)
}
</>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/514816.html
上一篇：錯誤訊息中的“ReactHookuseEffect內部的componentMounted變數將在每次渲染后丟失”是什么意思？