Блог

Я внедряю опрос-реагирую в своем приложении react с помощью:

 import React, {Component} from 'react';
import "survey-react/survey.css";
import * as Survey from 'survey-react';

class App extends Component {
  constructor(props){
    super(props);
    this.state ={

    }
    this.onCompleteComponent = this.onCompleteComponent.bind(this)
  }

  onCompleteComponent = () =>{
    this.setState({
      isCompleted: true
    })
  }

  render() {
    Survey
    .StylesManager
    .applyTheme("");

    var json = {
      "title": "Simple Survey",
      "logoWidth": 60,
      "logoHeight": 60,
      "questions": [
        {
          "type": "dropdown",
          "name": "person",
          "title": "Choice",
          "hasOther": true,
          "isRequired": true,
          "choices": ["A","B","C"]
      },
          {
              "name": "name",
              "type": "text",
              "title": "Your name:",
              "isRequired": true
          },
          
          {
              "name": "I accept terms",
              "type": "checkbox",
              "isRequired": true,
              "choices": ["YES"]
          }
      ]
  };

 var model = new Survey.Model(json);

  var surveyRender = !this.state.isCompleted ?(
    <Survey.Survey
      model={model}
      showCompletedPage ={false}
      onComplete = {this.onCompleteComponent}
    />
  ) : null

  var isDone = this.state.isCompleted ?(
    <div>{JSON.stringify(model.data, null, 3)}</div>
  ): null;

  return (
    <div className = "App">
      <div>
      {surveyRender}
      {isDone}
    </div>
    </div>
  );
}
}

export default App;
 

но я не получаю форму вывода Json isDone, я попытался следовать этому https://surveyjs.io/Examples/Library/?id=survey-dataamp;platform=Reactjsamp;theme=modern но этот метод не работает и для меня, что я должен изменить в своем коде, чтобы получить результат опроса в виде объекта Json ?

Вы воссоздаете свою модель съемки при каждом рендеринге. Вот почему он сбрасывается при каждом изменении. Тебе нужно сделать что-то вроде этого:

 import React, {Component} from 'react';
import "survey-react/survey.css";
import * as Survey from 'survey-react';

//Survey.StylesManager.applyTheme("");

  var json = {
      "title": "Simple Survey",
      "logoWidth": 60,
      "logoHeight": 60,
      "questions": [
        {
          "type": "dropdown",
          "name": "person",
          "title": "Choice",
          "hasOther": true,
          "isRequired": true,
          "choices": ["A","B","C"]
      },
          {
              "name": "name",
              "type": "text",
              "title": "Your name:",
              "isRequired": true
          },
          
          {
              "name": "I accept terms",
              "type": "checkbox",
              "isRequired": true,
              "choices": ["YES"]
          }
      ]
  };

class App extends Component {
  constructor(props){
    super(props);

    this.model = new Survey.Model(json);
    this.state ={

    }
    this.onCompleteComponent = this.onCompleteComponent.bind(this)
  }

  onCompleteComponent = () =>{
    this.setState({
      isCompleted: true
    })
  }

  render() {

  var surveyRender = !this.state.isCompleted ?(
    <Survey.Survey
      model={this.model}
      showCompletedPage ={false}
      onComplete = {this.onCompleteComponent}
    />
  ) : null

  var isDone = this.state.isCompleted ?(
    <div>{JSON.stringify(model.data, null, 3)}</div>
  ): null;

  return (
    <div className = "App">
      <div>
      {surveyRender}
      {isDone}
    </div>
    </div>
  );
}
}

export default App;