WebSVN – LeadersLinked - Antes de SPA – Diff – /react-webpack/self-evaluation/self-evaluation/test/option/Option.js

-import React from "react";
+import React, { useState, useEffect } from "react";
 const Option = (props) => {
+    // get props
+    const { question } = props;
+    // init States
+    const [input, setInput] = useState(question.answer);
+    /**
+     * Update question answer
+     * @param {*} answer
+     */
+    const handleAnswerSimple = (value) => {
+        setInput(value);
+        question.answer = value;
+    }
+    /**
+     * Update question answer
+     * @param {*} answer
+     */
+    const handleAnswerMultiple = (value) => {
+        question.answer.includes(value) ?
+            question.answer = removeOptionMultiple(question.answer, value) :
+            question.answer.push(value)
+        setInput(question.answer);
+    }
+    /**
+     * componentDidMount
+     */
+    useEffect(() => {
+        setInput(question.answer);
+        console.log(question.answer);
+    }, [question]);
+    /**
+     * Delete existing option
+     * @param {*} arr
+     * @param {*} item
+     * @returns
-    // get props
+     */
-    const { question, handleAnswer } = props;
+    const removeOptionMultiple = (arr, item) => arr.splice(arr.indexOf(item), 1);
     return (
                         {question.type == 'multiple' &&
                             <input
                                 type="checkbox"
                                 name={`${opt.slug_option}[]`}
-                                value={opt.slug_option}
+                                value={input}
-                                checked={question.answer.includes(opt.slug_option)}
+                                checked={input.includes(opt.slug_option)}
-                                onChange={() => handleAnswer(question.slug_section, question.slug_question, opt.slug_option)}
+                                onChange={() => handleAnswerMultiple(opt.slug_option)}
                             />
+                        }
                         {question.type != 'multiple' &&
                             <input
                                 type="radio"
                                 name={`${opt.slug_question}`}
                                 value={opt.slug_option}
-                                checked={question.answer == opt.slug_option}
+                                checked={input == opt.slug_option}
-                                onChange={() => handleAnswer(question.slug_section, question.slug_question, opt.slug_option)}
+                                onChange={() => handleAnswerSimple(opt.slug_option)}
                             />
+                        }
                         <div
                             dangerouslySetInnerHTML={{ __html: opt.text }}

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/self-evaluation/self-evaluation/test/option/Option.js – Rev 450 → 456