值不会持续显示无

Question

我有2份表格

    const Form1 = () => (
    <form style={{ display: activeStep === 0 ? 'block' : 'none' }}>
      <label>Form1</label>
      <input size={10}></input>
      <ButtonDefaultLink name='MoveNext' className='' click={()=>{setActiveStep(prev=>prev+1)}}/>
    </form>
  );
  const Form2 = () => (
    <form style={{ display: activeStep === 1 ? 'block' : 'none' }}>
      <label>Form2</label>
      <input size={10}></input>
      <ButtonDefaultLink name='MoveNext' className='' click={()=>{setActiveStep(prev=>prev+1)}}/>
    </form>
  );

我根据状态变量隐藏和取消隐藏它们。我的期望是，由于我没有执行

activestep==1 && <Form1/>

而是使用 CSS 属性，因此表单值将持续存在。但是当我输入一些文本，移至下一个，然后将状态更改回 1 时，该值就会丢失。我知道我可以使用状态来保存值，但值不应该已经存在而没有状态，因为我没有卸载表单？

Answer 1

来自 MDN：

display: none

关闭元素的显示，使其对布局没有影响（文档呈现为就好像该元素不存在一样）。

这意味着通过设置

display: none

，您将从 DOM 中删除一个元素，从而删除其中的值。您可以考虑使用

visivility: hidden

隐藏其中一个表单，但在这种情况下，其他元素不会占用

<form>

的空间。

相关文章：可见性隐藏与不显示 – CSS 有什么区别？