我对最终形式的反应有问题,它在 3 秒后重置值并恢复到初始值......调试花了 3 天但没有任何变化......这是代码...... 任何想法和信息都会被屏蔽,谢谢
const ChoiceQuestionFrom = ({ editMode = true, onSubmit = () => {}}) => {
const handleValidations = (values) => {
let errors = {};
if(!values.question){
errors.question = "Question Required !"
}
return errors;
}
return (
<Form
onSubmit={(values) => {
return onSubmit(values);
}}
render={_ChoiceQuestionFrom}
editMode={editMode}
initialValues={{
type: "question",
qType: "pollMultiChoice",
question: "",
answers: [{ answer: "", isCorrect: false }],
}}
validate={handleValidations}
/>
);
};
const _ChoiceQuestionFrom = (props) => {
const {
editMode,
values,
submitting,
form: { change: onFormChange },
handleSubmit,
} = props;
const handleListEdit = (e, ind) => {
const { value: answer } = e.currentTarget;
let currentAnswers = [...values.answers];
currentAnswers[ind] = { ...currentAnswers[ind], answer };
onFormChange("answers", currentAnswers);
};
const handleDeleteItem = (ind) => {
let currentAnswers = [...values.answers];
currentAnswers.splice(ind, 1);
onFormChange("answers", currentAnswers);
};
const handleCheckboxChange = (ind) => {
let currentAnswers = [...values.answers];
currentAnswers[ind] = {
...currentAnswers[ind],
isCorrect: !currentAnswers[ind].isCorrect,
};
onFormChange("answers", currentAnswers);
};
const handleQuestionStatementChange = (e) => {
return onFormChange("question", e.target.value);
};
return (
<form onSubmit={handleSubmit}>
<QuestionStatement
value={values.question}
onChange={handleQuestionStatementChange}
outerStyles={styles.questionStatement}
/>
<JunoTypography variant="h2" style={{marginBottom: 10}}><FormattedMessage id="ChoiceQuestionForm.AddChoices" defaultMessage="Add Choices" /></JunoTypography>
{values.answers.map((val, ind) => (
<FieldCheckListItem
key={ind} // change with id
onDelete={() => handleDeleteItem(ind)}
onTextChange={(e) => handleListEdit(e, ind)}
onCheckboxChange={() => handleCheckboxChange(ind)}
textFullWidth={true}
textValue={val.answer}
checked={val.isCorrect}
disabled={editMode}
outerStyle={styles.item}
/>
))}
<div className="flex" style={styles.buttonsContainer}>
<DesignedRoundDashedButton
type="button"
label={
<FormattedMessage
id="ChoiceQuestionForm.AddAnswer"
defaultMessage="Add Answer"
/>
}
onClick={() =>
onFormChange("answers", [
...values.answers,
{ answer: "", isCorrect: false },
])
}
/>
<FieldButton
color="primary"
variant="contained"
submitting={submitting}
type="submit"
style={styles.saveBtn}
>
<FormattedMessage id="Question.Save" defaultMessage="Save" />
</FieldButton>
</div>
</form>
);
};
大家好,我对最终形式的反应有问题,它在 3 秒后重置值并恢复到初始值......调试花了 3 天但没有任何变化......这是代码...... 任何想法和信息都会被屏蔽,谢谢
答案 0 :(得分:1)
如果到目前为止你还没有解决,你可以使用 keepDirtyOnReinitialize
属性来解决。正如您在文档中所见,https://final-form.org/docs/react-final-form/types/FormProps#keepdirtyonreinitialize 它的作用是不覆盖您目前所做的更改。
但是,发生这种情况的事实可能表明您构建表单组件的方式存在其他问题...但是从您放置在此处的代码中看不到这一点。