#reactjs #semantic-ui-react
#reactjs #семантический-пользовательский интерфейс-реагировать
Вопрос:
Я пытаюсь создать форму, которая имеет два шага / вкладки. Пользователь может переходить туда и обратно. На каждом шаге / вкладке есть поля ввода. Вот как выглядят мои шаги:
//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;
По большей части это работает нормально, но когда пользователь изменяет шаги взад и вперед, данные повторно инициализируются, и они теряют все, что они ранее ввели в эти текстовые поля. Я почти уверен, что это происходит потому, что компоненты повторно отображаются, когда пользователь нажимает на каждый шаг.
Как мне избежать потери данных, когда пользователь переходит назад и вперед по шагам?
Комментарии:
1. Рассмотрите возможность рефакторинга с использованием xstate и сохранения данных в контексте xstate. Таким образом, при изменении состояния ваш компонент может отображать контекст, который был сохранен в последний раз, когда пользователь находился в этом состоянии. Смотрите больше информации об управлении состоянием с помощью xstate здесь: xstate.js.org/docs . Если вы заинтересованы в этом, дайте мне знать, и я могу собрать MWE, чтобы вы начали.
2. обновляет состояние новым значением, которое пользователь вводит в текстовое поле.
3. ОК. Я думаю, что мне нужно сохранить состояние, когда пользователь меняет вкладку, и использовать его, когда пользователь возвращается на эту вкладку.