SHARE
TWEET

Untitled

a guest Jun 16th, 2019 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import {
  3.   FormGroup,
  4.   FormControl,
  5.   ControlLabel,
  6.   PageHeader,
  7.   Panel,
  8.   FormLabel,
  9.   Button,
  10.   Alert,
  11.   Form,
  12.   Grid,
  13.   Row,
  14.   Col,
  15.   Tabs,
  16.   Tab,
  17. } from 'react-bootstrap';
  18.  
  19. import Axios from 'axios';
  20. Axios.defaults.withCredentials = true;
  21.  
  22.  
  23. class FillForm extends React.Component {
  24.   constructor(props) {
  25.     super(props);
  26.     this.state = {
  27.       isGoing: true,
  28.       numberOfGuests: 2,
  29.       formTitle: "Sample Title",
  30.       formDescription: "Sample Form Description",
  31.       listAnswers: [],
  32.       listQuestions: [{ 'question_text': '1+1=?', 'question_type': 'text' }, { 'question_text': '2+2=? A: 4 B:5 C:6 D:7', 'question_type': 'select' }],
  33.     };
  34.    
  35.     this.handleInputChange = this.handleInputChange.bind(this);
  36.     this.handleInputChangeForm = this.handleInputChangeForm.bind(this);
  37.     //this.addQuestion = this.addQuestion.bind(this);
  38.     this.handelSubmit = this.handleSubmit.bind(this);
  39.     //this.delQuestion = this.delQuestion.bind(this);
  40.   }
  41.  
  42.   componentDidMount() {
  43.     alert("FormId" + this.props.match.params.FormId);
  44.     const listAnswers = [];
  45.     for (const [index, value] of this.state.listQuestions.entries()){
  46.       listAnswers.push([{'question_id': 'Q_'+index, 'answer': ''}]);
  47.     }
  48.     this.setState({listAnswers: listAnswers});
  49.     // Axios.get(window.BACKEND + '/api/forms/' + this.props.match.params.FormId)
  50.     //   .then(json => {
  51.     //     json = json.data
  52.     //     //parse data
  53.     //   });
  54.   }
  55.  
  56.   handleInputChange(event) {
  57.     const target = event.target;
  58.     const value = target.type === 'checkbox' ? target.checked : target.value;
  59.     const name = target.name;
  60.     this.setState({
  61.       [name]: value
  62.     });
  63.   }
  64.  
  65.   handleInputChangeForm(event) {
  66.     const target = event.target;
  67.     const value = target.value;
  68.     const name = target.name;
  69.     const idx = parseInt(name.split("_")[1]);
  70.     //alert(idx);
  71.     this.setState({
  72.       [name]: value
  73.     });
  74.     const listAnswers = this.state.listAnswers.slice();
  75.     listAnswers[idx]['answer'] = value;
  76.     this.setState({ listAnswers: listAnswers });
  77.  
  78.   }
  79.  
  80.   handleSubmit(event) {
  81.     const FormId = this.props.match.params.FormId;
  82.     const listAnswers = this.state.listAnswers;
  83.     Axios.post(window.BACKEND + '/api/forms/' + FormId, { formId: FormId, listAnswers: listAnswers })
  84.       .then(json => {
  85.         json = json.data
  86.         if (json.success) {
  87.           alert("成功新增表單");
  88.         } else {
  89.           alert("尷尬...");
  90.         }
  91.       })
  92.   }
  93.  
  94.   render() {
  95.     const elements = ['one', 'two', 'three'];
  96.     const items = []
  97.  
  98.     for (const [index, value] of this.state.listQuestions.entries()) {
  99.       const q_name = "Q_" + index;
  100.       if (value['question_type'] === "select") {
  101.         items.push(
  102.           <div>
  103.             <Panel>
  104.               <Panel.Heading><Panel.Title componentClass="h3">第{index + 1}題</Panel.Title></Panel.Heading>
  105.               <Panel.Body>{value['question_text']}</Panel.Body>
  106.               <Panel.Footer>
  107.               <FormControl componentClass="select"
  108.                 name={q_name}
  109.                 //value={this.state.listAnswers[index]['answer']}
  110.                 onChange={this.handleInputChangeForm}>
  111.                 <option value="A">A</option>
  112.                 <option value="B">B</option>
  113.                 <option value="C">C</option>
  114.                 <option value="D">D</option>
  115.               </FormControl>
  116.               </Panel.Footer>
  117.             </Panel>
  118.           </div>
  119.         );
  120.       } else if (value['question_type'] === "text") {
  121.         items.push(
  122.  
  123.           <div>
  124.             <Panel>
  125.               <Panel.Heading><Panel.Title componentClass="h3">第{index + 1}題</Panel.Title></Panel.Heading>
  126.               <Panel.Body>{value['question_text']}</Panel.Body>
  127.               <Panel.Footer>
  128.               <FormControl name={q_name}
  129.                 type="text"
  130.                 //value={this.state.listAnswers[index]['answer']}
  131.                 onChange={this.handleInputChangeForm} />
  132.               </Panel.Footer>
  133.             </Panel>
  134.           </div>
  135.         );
  136.       }
  137.     }
  138.  
  139.     return (
  140.       <Grid>
  141.         <Row>
  142.           <Col xs={12} md={12}>
  143.             <PageHeader>
  144.               {this.state.formTitle} <small></small>
  145.             </PageHeader>
  146.             <Panel>
  147.               <Panel.Body>{this.state.formDescription}</Panel.Body>
  148.             </Panel>
  149.             <Form horizontal method="post" onSubmit={this.handleSubmit}>
  150.  
  151.               {items}
  152.               <Button type="submit" value="submit">我填完了!</Button>
  153.             </Form>
  154.           </Col>
  155.         </Row>
  156.       </Grid>
  157.     );
  158.   }
  159. }
  160.  
  161.  
  162.  
  163. export default FillForm;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top