我有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 时,该值就会丢失。我知道我可以使用状态来保存值,但值不应该已经存在而没有状态,因为我没有卸载表单?
来自 MDN:
关闭元素的显示,使其对布局没有影响(文档呈现为就好像该元素不存在一样)。display: none
这意味着通过设置
display: none
,您将从 DOM 中删除一个元素,从而删除其中的值。您可以考虑使用 visivility: hidden
隐藏其中一个表单,但在这种情况下,其他元素不会占用 <form>
的空间。