如何使页面保留在页面上，并在reactjs中提供动态问题和选择？

2 回答

• 1

  您直接通过mutating state（ 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;
  

  回复于 2024-05-06T02:17:49+08:00
• 0

  请参考code sandbox .

  AppContainer Component

  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>
      );
    }
  }
  

  Page Component

  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 Component

  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;
  

  希望这可以帮助

  干杯!

  回复于 2024-05-06T02:17:49+08:00