Всем счастливых выходных! Я просто не могу что-то придумать с утра. Я пытался выяснить, как заставить страницу оставаться на странице, но у меня есть вопросы и варианты ответов динамически. После того, как человек нажмет «Далее», варианты будут сохранены в данных json. Любой может мне помочь, это будет очень признательно. Пожалуйста, смотрите ниже код и изображение! Спасибо!

import React, { Component } from "react";
import { Button } from "reactstrap";



    return (
      <div>
        <div className="howMuchText">How much does it cost to build an app</div>
        <div>
          <l1>{this.state.form}</l1>
        </div>
        <div className="nextButton">
          <Button>
            Next
          </Button>
        </div>
      </div>
    );
  }
}

export default Questions;
0
kenny335 9 Дек 2018 в 05:31

1 ответ

Лучший ответ

См. песочницу кода.

Компонент AppContainer

import React, { Component } from "react";
import Page from "./Page";
export default class AppContainer extends Component {
  state = {
    question: 0,
    form: [
      {
        title: "What is the category you want",
        options: [
          { name: "Games", checked: false },
          { name: "Business", checked: false },
          { name: "Education", checked: false },
          { name: "Lifestyle", checked: false },
          { name: "Entertainment", checked: false },
          { name: "Utility", checked: false },
          { name: "Social", checked: false },
          { name: "Other", checked: false }
        ],
        multiple: true
      },
      {
        title: "platform",
        options: [
          { name: "ios", checked: false },
          { name: "android", checked: false },
          { name: "windows", checked: false },
          { name: "server", checked: false },
          { name: "web", checked: false }
        ],
        multiple: true
      }
    ]
  };

  nextPage() {
    this.setState({
      question: this.state.question + 1
    });
  }

  prevPage() {
    this.setState({
      question: this.state.question - 1
    });
  }
  checkItem(index) {
    this.setState((previousState, currentProps) => {
      previousState.form[previousState.question].options[
        index
      ].checked = !previousState.form[previousState.question].options[index]
        .checked;
      return { from: previousState.form };
    });
  }

  render() {
    return (
      <div>
        <Page
          checkItem={this.checkItem.bind(this)}
          question={this.state.form[this.state.question]}
        />
        <hr />
        <button
          disabled={this.state.question === 0}
          className="btn btn-primary"
          onClick={this.prevPage.bind(this)}
        >
          Prev
        </button>{" "}
        &nbsp;
        <button
          disabled={this.state.question === this.state.form.length - 1}
          onClick={this.nextPage.bind(this)}
          className="btn btn-primary"
        >
          Next
        </button>
      </div>
    );
  }
}

Компонент страницы

import React, { Component } from "react";
import PropTypes from "prop-types";
import Questions from "./Questions";
class Page extends Component {
  render() {
    return (
      <section>
        <h3 style={{ marginTop: 20 }}>{this.props.question.title}</h3>
        <Questions
          checkItem={this.props.checkItem}
          questions={this.props.question.options}
        />
      </section>
    );
  }
}
Page.propTypes = {
  question: PropTypes.object
};
export default Page;

Компонент Qustions

import React from "react";

class Questions extends React.Component {
  render() {
    return (
      <div>
        {this.props.questions.map((obj, index) => (
          <button
            key={index}
            style={{ margin: "10px" }}
            className={
              obj.checked ? "btn btn-primary btn-sm " : "btn btn-outline btn-sm"
            }
            onClick={() => this.props.checkItem(index)}
          >
            {obj.name}
          </button>
        ))}
      </div>
    );
  }
}

export default Questions;

Надеюсь это поможет

Ура!

1
Aamin Khan 9 Дек 2018 в 10:11