折叠并重新打开 React 手风琴会重置内部状态

Question

我正在使用 ReactJS 手风琴组件，在每个部分中渲染表单。但是，当我折叠然后展开手风琴时，所有表单输入都会重置为其默认值。这似乎是在

isOpen

状态发生变化时通过重新渲染触发的。如何在保持手风琴功能的同时保留表单状态？”

我已经在使用

<Accordion {...props}/>

的父文件中定义了表单状态，并将

setState

函数作为 props 发送。 setState 在表单组件内部调用

手风琴组件

export default function Accordian({
  title,
  content,
  children,
  headingPrefixIcon,
  headingSuffixIcon,
  fontSize = 'medium',
  textSize = 'lg',
  customizableClassProps = 'border-t',
  showToggle = false,
  showBadge,
  badgeText,
  isCollapsible = true,
  taggleEnable,
  setTaggleEnable,
  useAccordianStateForToggle = false
}) {
  const [isOpen, setIsOpen] = useState(true);

  const toggleAccordion = () => {
    setIsOpen(!isOpen);
  }

  const [enabled, setEnabled] = useState(false);

  return (
    <div className='border border-gray-200 rounded-base mb-2 w-full'>
      <div
        className='flex justify-between items-center p-3 cursor-pointer bg-[#F9F8FD] rounded-base select-none'
        onClick={toggleAccordion}
      >
        <div className='flex items-center gap-2'>
          <div>{headingPrefixIcon}</div>
          <h2
            className={`text-${textSize} font-${fontSize} text-app-description`}
          >
            {title}
          </h2>
          <div>{headingSuffixIcon}</div>
        </div>
        {isCollapsible ?
          !showToggle ? (
            isOpen ? (
              <ChevronUpIcon className='w-6 h-6' />
            ) : (
              <ChevronDownIcon className='w-6 h-6' />
            )
          ) : (<FlyyToggle enabled={!useAccordianStateForToggle ? taggleEnable : isOpen} setEnabled={!useAccordianStateForToggle ? setTaggleEnable : setIsOpen} sort />) : showBadge ? <FlyyBadge size={"small"} rounded grey badgeText={badgeText} /> : <div />}
      </div>
      {isOpen && (
        <div className={`p-3 ${customizableClassProps} border-gray-200`}>
          {content || children}
        </div>
      )}
    </div>
  )
}

表单通过

content

道具渲染。

我已经尝试在父文件中初始化状态，仍然面临同样的问题。

如果您需要任何其他详细信息，请告诉我 谢谢

Answer 1

如果您需要在页面中保留表单，您可以使用 css 来显示或隐藏它，避免每次关闭手风琴时都破坏它。

<div className={`${isOpen ? '' : 'hidden'} p-3 ${customizableClassProps} border-gray-200`}>
  {content || children}
</div>