如何使頁面在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;

Answer 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;

問題組件

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;

希望這可以幫助

干杯!

Answer 2

通過直接改變狀態 （ this.state = ... ）並在渲染階段進行操作，您正在犯一個大錯誤。 您試圖實現的目標是初始化狀態，並且必須在構造函數中進行操作。

同樣在render方法中，您只是無法渲染this.state.form因為它是一個對象。 React不允許將對象呈現為子組件的集合。 為此，您需要使用數組。

class Questions extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      ...
    };
  }

  ...

  render() {
    return (
      <div>
        <div className="howMuchText">How much does it cost to build an app</div>
        <div>
          // This leads to another error.
          <l1>{this.state.form}</l1>
        </div>
        <div className="nextButton">
          <Button color="primary" size="lg">
            Next
          </Button>
        </div>
      </div>
    );
  }
}

export default Questions;