Formik을 사용하여 양식을 만듭니다.
const initialValues = {
groupName: '',
description: '',
testGroup: 0
};
return (
<Formik initialValues={initialValues} >
{(formik) => {
const { setValues } = formik;
const onRadioGroupetestChange = (input) => {
setValues({
...initialValues,
testGroup: Number(input)
});
};
return (
<Form>
<FormikControl
control="input"
label={_getText("group.name")}
name="groupName"
placeholder={_getText("placeholder.group.name")}
/>
<FormikControl
control="textarea"
label={_getText("description")}
name="description"
placeholder={_getText("placeholder.group.descr")}
/>
<FormikControl
formik={formik}
control="radio"
onChange={onRadioGroupetestChange}
initialValue={initialValues.testGroup}
name="testGroup"
label={_getText('group.test')}
options={radioDataGroupTest}
/>
<Flex
flexWidth={1}
alignItems="center"
justifyContent="center"
margin="2rem 0 0 0"
>
<Flex margin="0 0.8rem 0 0">
<Button
variant="line"
text="Cancel"
type="reset"
onClick={closeModal}
/>
</Flex>
<Flex margin="0 0 0 0.8rem">
<Button text="Submit" type="submit" />
</Flex>
</Flex>
</Form>
);
}}
</Formik>
"testGroup"소품이있는 FormikControl 구성 요소는 두 개의 라디오 버튼을 렌더링합니다.
런타임에 라디오 버튼의 선택되지 않은 버튼을 클릭하면 양식의 모든 필드가 지워집니다. 그렇다면 구성 요소 groupName 및 설명에 입력 한 데이터를 저장하는 방법은 무엇입니까?
이것이 바로 다음과 같이 양식을 재설정하는 이유입니다.
setValues({
...initialValues,
testGroup: Number(input)
});
대신 setFieldValue 를 시도 하거나 대신 값을 사용하십시오 initialFormValues.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다