Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 455 Rev 456
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from "react";
 1 
import React, { useState, useEffect } from "react";
2 
import Option from "../option/Option";
 2 
import Option from "../option/Option";
Línea 3... Línea 3...
3 
 
 3 
 
Línea 4... Línea -...
4 
const Question = (props) => {
 - 
 
5 
 
 - 
 
6 
 
 - 
 
7 
 
 4 
const Question = (props) => {
8 
 
 5 
 
9 
    // get props
 - 
 
Línea -... Línea 6...
- 
 
 6 
    // get props
- 
 
 7 
    const { question, backendVars } = props;
- 
 
 8 
 
10 
    const { question, backendVars, handleAnswer } = props;
 9 
    // init States
- 
 
 10 
    const [input, setInput] = useState(question.answer);
- 
 
 11
- 
 
 12 
    /**
- 
 
 13 
     * Update question answer
- 
 
 14 
     * @param {*} answer
- 
 
 15 
     */
- 
 
 16 
    const handleAnswer = (value) => {
- 
 
 17 
        setInput(value);
- 
 
 18 
        question.answer = value;
11 
    const [input, setInput ] = useState(question.answer);
19 
    }
12 
 
 20 
 
13 
     /**
 21 
    /**
14 
     * componentDidMount
 22 
     * componentDidMount
15 
     */
 23 
     */
16 
      useEffect(() => {
 24 
    useEffect(() => {
Línea -... Línea 25...
- 
 
 25 
        setInput(question.answer);
- 
 
 26 
        console.log(question.answer);
17 
        setInput(question.answer);
 27 
    }, [question]);
18 
        console.log(question.answer);
 28 
 
19 
    }, [question]);
 29 
 
20 
 
 30 
 
21 
    return (
 31 
    return (
Línea 31... Línea 41...
31 
                <div className="form-group">
 41 
                <div className="form-group">
32 
                    {question.multiline == 1 ? (
 42 
                    {question.multiline == 1 ? (
33 
                        <textarea
 43 
                        <textarea
34 
                            className="form-control"
 44 
                            className="form-control"
35 
                            rows="5"
 45 
                            rows="5"
36 
                            value={question.answer}
 46 
                            value={input}
37 
                            maxLength={question.maxlength}
 47 
                            maxLength={question.maxlength}
38 
                            name={question.slug_question}
 48 
                            name={question.slug_question}
39 
                            onChange={e =>question.answer = e.target.value}
 49 
                            onChange={e => handleAnswer(e.target.value)}
40 
                        />
 50 
                        />
41 
                    ) : (
 51 
                    ) : (
42 
                        <input
 52 
                        <input
43 
                            type="text"
 53 
                            type="text"
44 
                            className="form-control"
 54 
                            className="form-control"
45 
                            value={question.answer}
 55 
                            value={input}
46 
                            maxLength={question.maxlength}
 56 
                            maxLength={question.maxlength}
47 
                            name={question.slug_question}
 57 
                            name={question.slug_question}
48 
                            onChange={e =>
 58 
                            onChange={e => handleAnswer(e.target.value)}
49 
                                handleAnswer(question.slug_section, question.slug_question, e.target.value)
 - 
 
50 
                            }
 - 
 
51 
                        />
 59 
                        />
52 
                    )}
 60 
                    )}
53 
                </div>
 61 
                </div>
54 
            }
 62 
            }
55 
            {question.type == 'rating-range' &&
 63 
            {question.type == 'rating-range' &&
Línea 58... Línea 66...
58 
                        return (
 66 
                        return (
59 
                            <div className="checkbox"
 67 
                            <div className="checkbox"
60 
                                key={i}>
 68 
                                key={i}>
61 
                                <input
 69 
                                <input
62 
                                    type="radio"
 70 
                                    type="radio"
63 
                                    checked={question.answer == i + 1}
 71 
                                    checked={input == i + 1}
64 
                                    name={question.slug_question}
 72 
                                    name={question.slug_question}
65 
                                    value={i + 1}
 73 
                                    value={i + 1}
66 
                                    onChange={() =>
 74 
                                    onChange={e => handleAnswer(i + 1)}
67 
                                        handleAnswer(question.slug_section, question.slug_question, i + 1)
 - 
 
68 
                                    }
 - 
 
69 
                                />
 75 
                                />
70 
                                <div className="option">
 76 
                                <div className="option">
71 
                                    {i + 1}
 77 
                                    {i + 1}
72 
                                </div>
 78 
                                </div>
73 
                            </div>
 79 
                            </div>
Línea 76... Línea 82...
76 
                </div>
 82 
                </div>
77 
            }
 83 
            }
78 
            {(question.type == 'simple' || question.type == 'rating-open' || question.type == 'multiple') &&
 84 
            {(question.type == 'simple' || question.type == 'rating-open' || question.type == 'multiple') &&
79 
                <div className="form-group">
 85 
                <div className="form-group">
80 
                    {question.options.length > 0 &&
 86 
                    {question.options.length > 0 &&
81 
                        <Option
 - 
 
82 
                            question={question}
 87 
                        <Option question={question} />
83 
                            handleAnswer={handleAnswer} />
 - 
 
84 
                    }
 88 
                    }
85 
                </div>
 89 
                </div>
86 
            }
 90 
            }
87 
        </div>
 91 
        </div>
88 
    )
 92 
    )