时间戳

首页 > 解决方案 > 如何使用下一个 js 有条件地渲染反应表单

reactjs - 如何使用下一个 js 有条件地渲染反应表单

问题描述

我是 Web 开发新手，正在使用 next js 开发一个小项目。我有一种餐厅注册表格，其中有很多输入，这就是为什么我想把它分成两页。第一页包含表单的前半部分，单击“下一步”按钮将用户带到表单的其余部分。

为此，我想显示表单的前半部分，然后单击下一步后，我使这半部分消失并显示后半部分。这很简单，你会从我的代码中理解：

 export default function RestaurantRegistration() {
 let turnPage = false 

  const turnToSecondPage = () => {
  turnPage = true 
      }
    return (


<React.Fragment turnPage={false} >
      
       //FIRST HALF FORM CODE
    <Button
        onClick={() => {turnToSecondPage()}}
       >
       Next
      </Button>
      </div>  
   </div>
</React.Fragment>
<React.Fragment turnPage={true} >
     
 //SECOND HALF OF FORM CODE 
</React.Fragment>

但我得到了错误

在此处输入图像描述

那么这里有什么问题呢？有没有更好的方法来做我想做的事？

标签： reactjsnext.js

解决方案

在这段代码中，你有两个主要错误首先你不能将道具传递给 React.Fragment 第二即使你可以它仍然不显示你的第二页

你可以使用这样的东西。

export default function RestaurantRegistration() {
const [turnPage,setTurnPage]=useState(false);

  const turnToSecondPage = () => {
  setTurnPage(true)
      }
    return (


<React.Fragment>
      {!turnPage &&<div>
       //FIRST HALF FORM CODE
    <Button
        onClick={turnToSecondPage}
       >
       Next
      </Button>
</div>
}
{turnPage && <div> ...</div>}

</React.Fragment>

推荐阅读