mardi 2 août 2022

React onSubmit are not triggered with some Form.Check checkboxes

I have written modal window with dynamic fields. Text input, date and radio boxes works fine, but when I`m trying to use checkbox inputs it falls. handleSubmit does not work and not goes into method body AnswerQuestion:

function AnswerQuestion(props) {
const {questionStore} = useContext(Context);
const dispatch = useNotification();
const question = questionStore.getActiveAnswer();
const show = props.show;
const handleClose = props.handleClose;
const handleUpdate = props.handleUpdate;

const [checkedState, setCheckedState] = useState(question.id && question.answerEntity.answerType === "CHECKBOX"
    ? Array(question.answerEntity.options.length).fill(false)
    : []
)

useEffect(() => {
    if(question.id && question.answerEntity.answerType === "CHECKBOX") {
        const newCheckedState = question.answerEntity.options.map((option) => question.answerEntity.answer.includes(option));
        setCheckedState(newCheckedState);
    }
}, [])

const setInitialValues = () => {
    if (question.id) {
        return {
            author: question.author.username,
            question: question.question,
            answerType: question.answerEntity.answerType,
            options: question.answerEntity.options,
            date: question.answerEntity.answerType === "DATE" && question.answerEntity.answer ? new Date(question.answerEntity.answer) : new Date(),
            answer: question.answerEntity.answer ? question.answerEntity.answer : "",
        };
    } else {
        return {
            author: "",
            question: "",
            answerType: "",
            options: "",
            date: new Date(),
            answer: "",
        };
    }
};

const schema = yup.object().shape({
    author: yup.string().required(),
    question: yup.string().required(),
    answer: yup.string(),
    answerCheckBox: yup.array(),
    date: yup.date(),
});

const submit = (values) => {
    questionStore
        .answerActiveQuestion(question.answerEntity.answerType, values.answer, values.date)
        .then(() => handleUpdate());
    handleClose();
    dispatch({
        type: "SUCCESS",
        message: "Your answer was saved.",
        title: "Success"
    })
}

return (
    <Formik
        enableReinitialize
        render={(props) => {
            return (
                <AnswerQuestionForm
                    {...props}
                    show={show}
                    handleClose={handleClose}
                    checkedState={checkedState}
                ></AnswerQuestionForm>
            );
        }}
        initialValues={setInitialValues()}
        validationSchema={schema}
        onSubmit={submit}
    >
    </Formik>
)

} And AnswerQuestionForm:

function AnswerQuestionForm(props) {
const {
    values,
    errors,
    touched,
    handleSubmit,
    handleChange,
    handleClose,
    setFieldValue,
    setFieldTouched,
    show,
    checkedState,
} = props;

function insertAnswerModule() {
    switch (values.answerType) {
        case "DATE":
            return (
                <Col sm={9}>
                    <DatePicker
                        name="date"
                        value={Date.parse(values.date)}
                        selected={values.date}
                        className="form-control"
                        onChange={(e) => {
                            setFieldValue('date', e);
                            setFieldTouched('date');
                        }}
                    />
                </Col>
            )
        case "SINGLE_LINE_TEXT":
            return (
                <Col sm={9}>
                    <Form.Control
                        type="text"
                        name="answer"
                        value={values.answer}
                        onChange={handleChange}
                        isValid={touched.question && !errors.question}
                        isInvalid={!!errors.question}
                    />

                    <Form.Control.Feedback type="invalid">
                        {errors.question}
                    </Form.Control.Feedback>
                </Col>
            )
        case "MULTILINE_TEXT":
            return (
                <Col sm={9}>
                    <Form.Control as="textarea" rows={3}
                                  type="text"
                                  name="answer"
                                  value={values.answer}
                                  onChange={handleChange}
                                  isValid={touched.question && !errors.question}
                                  isInvalid={!!errors.question}
                    />

                    <Form.Control.Feedback type="invalid">
                        {errors.question}
                    </Form.Control.Feedback>
                </Col>
            )
        case "CHECKBOX":
            return (
                <Col sm={9}>
                    {values.options.map((option, id) => (
                        <Form.Check
                            id={id}
                            type="checkbox"
                            name="answerCheckBox"
                            label={option}
                            value={option}
                            defaultChecked={checkedState[id]}
                            onChange={handleChange}
                        />
                    ))}
                </Col>
            )
        case "RADIO_BUTTON":
            return (
                <Col sm={9}>
                    {values.options.map((option) => (
                        <Form.Check
                            type="radio"
                            name="answer"
                            label={option}
                            value={option}
                            checked={option === values.answer}
                            onChange={handleChange}
                        />
                    ))}
                </Col>
            )
    }
}

return (
    <Modal show={show} onHide={handleClose} centered backdrop="static">
        <Modal.Header closeButton>
            <Modal.Title>Answer the question</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <Form>
                <Row className="me-3 md-3 justify-content-between">
                    <Form.Group as={Row}>
                        <Form.Label column sm={3}>
                            From user
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control
                                type="text"
                                name="author"
                                value={values.author}
                                readOnly
                                disabled
                            ></Form.Control>
                        </Col>
                    </Form.Group>
                </Row>
                <Row className="me-3 mt-3 md-3 justify-content-between">
                    <Form.Group as={Row}>
                        <Form.Label column sm={3}>
                            Question
                        </Form.Label>
                        <Col sm={9}>
                            <Form.Control
                                type="text"
                                name="question"
                                value={values.question}
                                readOnly
                                disabled
                            ></Form.Control>
                        </Col>
                    </Form.Group>
                </Row>
                <Row className="me-3 mt-3 md-3 justify-content-between">
                    <Form.Group as={Row}>
                        <Form.Label column sm={3}></Form.Label>
                        {insertAnswerModule()}
                    </Form.Group>
                </Row>
            </Form>
        </Modal.Body>
        <Modal.Footer>
            <Button variant="primary" onClick={handleSubmit}>
                SAVE
            </Button>
        </Modal.Footer>
    </Modal>
)

} I would be glad to know where is error and how to solve it.




Aucun commentaire:

Enregistrer un commentaire