Comments (4)
Hello @Priyeshvaghela77,
when user is typing the data gets cleared out due to re-renders
You may consider storing a survey model within a state variable to prevent re-rendering when a component state is changed.
function SurveyComponent() {
const [surveyModel, setSurveyModel] = useState(null);
...
}
Please try storing a survey model within the state variable and let me know if this resolves the issue.
from survey-library.
Hello @JaneSjs,
We are already using a state for that.
This is what we are doing (sample code):
import { useEffect, useRef, useState } from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/defaultV2.min.css";
import * as SurveyCore from "survey-core";
export function LoadDynamicForm({ template }: { template: string }) {
const [survey, setSurvey] = useState<Model | null>(null);
useEffect(() => {
const surveyModel = new Model(JSON.parse(template));
setSurvey(surveyModel);
}, [template]);
return <>{survey && <Survey model={survey} />}</>;
}
package.json file:
"react": "^18.2.0",
"survey-creator-react": "^1.9.122",
"survey-react": "^1.9.122",
In this, we are using the survey object to get the questions, set some default values, populate based on some conditions etc.
For, first few seconds when the form is opened, when user writes anything it gets cleared out due to state re-renders.
I also tried using redux state for this. But the issue still persists with redux also
from survey-library.
Can you please tell me how/when the surveyjs stores the data user entered? As far as I observed it is done onBlur (when the input loses the focus)
I tried logging the survey.data but it's always cleared when the webapp is re-rendering
from survey-library.
Hello,
User responses are stored within survey.data. An answer is passed to survey.data
when a question value is submitted; it usually happens when an input loses the focus.
I may recommend that you store user responses in some storage and load data when a survey component is being loaded. An example on how to store data in a browser local storage is available at Continue an Incomplete Survey.
Let us know if you have further questions.
from survey-library.
Related Issues (20)
- Numeric mask allows entering values less than the minimum value HOT 1
- Next button is not transformed to Finish when trigger function is met HOT 3
- [React] Dynamic Matrix: A column's `visibleIf` condition enables a column regardless of a cell value
- clearInvisibleValues includes prefilled values from not answered questions HOT 6
- Dynamic Matrix: The title is cut off when `titleLocation` is set to `"left"`
- Default Question Values are not applied when merging matrix and panel values using the valueName property HOT 1
- The navigateToUrl redirection occurs before the data sending operation completes within the survey.onComplete function
- Use en-gb instead of en-UK for English UK HOT 1
- The "Skip To" trigger doesn't work when its expression uses an "Other" option value
- [Mobile] Dynamic Matrix displays column titles for empty total cells
- Markdown Processing with Matrix Columns - Markdown fails to be converted to HTML for column titles
- The input area overflows the question box for an email entry question with maximum character limit set
- ICustomQuestionTypeConfiguration.onSetQuestionValue - Add API description
- `focusOnFirstError: false` doesn't prevent a question from being focused in a multi-page survey
- Pattern Input Mask (9999) doesn't allow entering values when textUpdateMode is set to "onTyping"
- Dynamic Panel with Tabbed UI - A new untitled panel displays a weird element within an empty panel title area
- Numeric Input Mask - Introduce an option to enforce the input format based on the digit precision (0.00)
- Add a note: checkErrorsMode: "onValueChanged" doesn't work for date input fields
- Remove all old themes except DefaultV2 and make it "default" HOT 1
- [Vue3] A Form contains a duplicate header when applying a custom theme
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from survey-library.