javascript - 如何制作一个页面，该页面将保留在页面上，其中包含 reactjs 中的动态问题和选择？

Question

大家周末快乐！我只是从早上开始就想不通。我试图弄清楚如何让页面保持在页面上，但让问题和响应选择动态。在一个人按下下一步后，选择将被存储到 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;

标签： javascriptarraysjsonreactjs

Answer 1

请参考代码沙箱。

应用容器组件

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;

问题组件

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;

希望这可以帮助

干杯!