Блог

Я пытаюсь создать форму, которая имеет два шага / вкладки. Пользователь может переходить туда и обратно. На каждом шаге / вкладке есть поля ввода. Вот как выглядят мои шаги:

     //components/ProductDetail.js
    const ProductDetail = forwardRef(({ data }, ref) => {
        const [productData, setProductData] = useState({})
    return (
        <Form.Input defaultValue={productData.title} name="title" onChange={handleChange} />
          )
    }

    //components/ProductMetadata.js
    const ProductMetadata = forwardRef(({ data }, ref) => {
        const [productMetadata, setProductMetadata] = useState({})
    return (
        <Form.Input defaultValue={productMetadata.tag} name="tag" onChange={handleChange} />
          )
    }
  

Вот как я отображаю их в зависимости от того, на какой Step пользователь нажимает:

 //displayproduct.js

    const MyProduct = ({ user, data }) => {
        const [currentStep, setCurrentStep] = useState("info")
    
        function handleStepClick(e) {
            const { name } = e.target;
            setCurrentStep(name)
        }
    
    
        return (
            <React.Fragment>
                <Step.Group widths={2}>
                    <Step active={currentStep === "info"} name="info" onClick={handleStepClick} >
                        <Step.Content>
                            <Step.Title>Product Information</Step.Title>
                        </Step.Content>
                    </Step>
                    <Step name="metadata" active={currentStep === "metadata"} onClick={handleStepClick}>
                        <Step.Content>
                            <Step.Title>Product Metadata</Step.Title>
                        </Step.Content>
                    </Step>
                </Step.Group>
                {currentStep == "info" ? <ProductDetail data={data} ></ProductDetail> : <ProductMetadata data={data} ></ProductMetadata>}
            </React.Fragment>
    
        )
    };
    export default MyProduct;
  

По большей части это работает нормально, но когда пользователь изменяет шаги взад и вперед, данные повторно инициализируются, и они теряют все, что они ранее ввели в эти текстовые поля. Я почти уверен, что это происходит потому, что компоненты повторно отображаются, когда пользователь нажимает на каждый шаг.

Как мне избежать потери данных, когда пользователь переходит назад и вперед по шагам?