Next.JS 表单中的双向绑定

Question

我有一个包含多个组件的页面，并且在每个组件上都有表单。在页面上显示组件时，我将对象传递给该组件（道具）并将其绑定到表单，效果很好。 问题是当我隐藏组件时，在表单中输入的数据不在对象中。我无法在表单上使用提交，因为用于保存数据和更改组件的按钮位于页面上，而不是组件上。 如何将数据从表单提交到组件上的对象（在组件更改时）。

我尝试在表单上添加提交按钮，然后将数据提交到对象，但这种情况在我的情况下是不可能的。

页面代码如下：

return (
    <div>
      <div className={`${index === 0 ? 'mb-10 w-full' : 'hidden'}`}>
        <ComponentOne test={test1}/>
      </div>

      <div className={`${index === 1 ? 'mb-10 w-full' : 'hidden'}`}>
        <ComponentTwo test={test2}/>
      </div>
      
      <button onClick={back} className='m-5'>Previous</button>
      <button onClick={next} className='m-5'>Next</button>
    </div>
  )

在组件中，我有一个表单，对象绑定到该表单，但没有提交按钮。

Answer 1

应该是因为当你隐藏组件时，它会跟随组件生命周期，所以他不再存在于虚拟dom中，并且它将被卸载，你可以通过在匿名函数末尾写入控制台日志来检查它useEffect 钩子。

Next 是一个构建在前端 React 之上的框架，React 没有像 Angular 那样的双向数据绑定，但是有不同的方法来保存数据并使其可供父组件或在任何情况下更多组件使用一般来说，我认为在这种情况下使用 useContext 是很好的，或者以更简单的方式将 test 和 setTest 作为表单的道具作为状态变量传递给表单，以便在输入更改时保存测试值，我想，所以你应该有变量即使表单隐藏，提交表单时也会在父组件中更新