Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 561 | Rev 565 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 561 Rev 564
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from "react";
 1 
import React, { useState, useEffect } from "react";
2 
import InputMultiple from "./input-multiple/InputMultiple";
 - 
 
Línea 3... Línea 2...
3 
 
 2 
 
Línea 4... Línea 3...
4 
const Option = (props) => {
 3 
const Option = (props) => {
5 
 
 4 
 
Línea 6... Línea 5...
6 
    // get props
 5 
    // get props
7 
    const { question } = props;
 6 
    const { option, backendVars } = props;
Línea 8... Línea 7...
8 
 
 7 
 
9 
    // init States
8 
    // init States
10 
    const [input, setInput] = useState(question.answer);
 9 
    const [input, setInput] = useState(option.answer);
11 
 
 10 
 
12 
    /**
 11 
    /**
13 
     * Update question answer
 12 
     * Update option answer
14 
     * @param {*} value
13 
     * @param {*} value
15 
     */
 14 
     */
Línea 16... Línea -...
16 
    const handleAnswer = (value) => {
 - 
 
17 
        setInput(value);
 15 
    const handleAnswer = (value) => {
18 
        question.answer = value;
 16 
        setInput(value);
19 
    }
 17 
        option.answer = value;
20 
 
 18 
    }
21 
 
 19 
 
22 
    /**
 20 
    /**
- 
 
 21 
     * componentDidMount
Línea 23... Línea 22...
23 
     * componentDidMount
 22 
     */
24 
     */
 - 
 
25 
    useEffect(() => {
 23 
    useEffect(() => {
26 
        setInput(question.answer);
 - 
 
27 
    }, [question]);
 24 
        setInput(option.answer);
28 
 
 25 
    }, [option]);
29 
 
 26 
 
30 
    return (
 27 
 
31 
        <div>
 28 
 
32 
            {question.options.map((opt, key) => {
 - 
 
33 
                return (
 29 
    return (
34 
                    <div className="checkbox"
 30 
        <div className="col-md-12 col-sm-12 col-xs-12 np-padding">
35 
                        key={key}>
 31 
            <div className="form-group" >
36 
                        {question.type == 'multiple' &&
 32 
                <div
37 
                            <InputMultiple
 - 
 
38 
                                option={opt}
 33 
                    dangerouslySetInnerHTML={{ __html: option.title }}
39 
                                question={question} />
 - 
 
40 
                        }
 - 
 
41 
                        {question.type != 'multiple' &&
 34 
                    className="title"
42 
                            <input
 35 
                />
43 
                                type="radio"
 36 
            </div>
44 
                                name={`${opt.slug_question}`}
 37 
            {option.type == 'open' &&
45 
                                value={opt.slug_option}
 38 
                <div className="form-group">
46 
                                checked={input == opt.slug_option}
 39 
                        <textarea
47 
                                onChange={() => handleAnswer(opt.slug_option)}
 40 
                            className="form-control"
48 
                            />
 - 
 
49 
                        }
 41 
                            rows="5"
50 
                        <div
 42 
                            value={input}
51 
                            dangerouslySetInnerHTML={{ __html: opt.text }}
 43 
                            maxLength='200'
52 
                            className="option"
 44 
                            name={option.id_option}
Línea 53... Línea -...
53 
                        />
 - 
 
54 
                    </div>
 45 
                            onChange={e => handleAnswer(e.target.value)}
- 
 
 46 
                        />
55 
                )
 47 
                </div>