使用history.push()方法将状态传递给另一个组件

问题描述 投票:1回答:1

在我的项目中,我试图在用户点击提交按钮时记录所有答案。有两个组件,每个组件都有不同的问题。当用户点击NEXT按钮完成第1部分问题后,应该将状态传递给另一个组件,以便记录我正在使用history.push(/ path,[state])传递数据的答案,但它不起作用。谁能告诉我如何解决这个问题?当我单击“提交”按钮时,只会记录问题4和5的答案,如输出中所示。

代码::

Section.js

import React, { Component } from "react";
import { Button } from "semantic-ui-react";
import { withRouter } from "react-router";
import Answers from "../Answers/Answers";

class Section extends Component {
    state = {
        que1: "",
        que2: "",
        que3: ""
    };

    handleClick = event => {
        this.setState(
            {
                que1: event.target.attributes.getNamedItem("data-key").value
            },
            () => {
                console.log(this.state.que1);
            }
        );
    };

    handleClick2 = event => {
        this.setState(
            {
                que2: event.target.attributes.getNamedItem("data-key").value
            },
            () => {
                console.log(this.state.que2);
            }
        );
    };

    handleClick3 = event => {
        this.setState(
            {
                que3: event.target.attributes.getNamedItem("data-key").value
            },
            () => {
                console.log(this.state.que3);
            }
        );
    };

    render() {
        let styles = {
            width: '50%',
            margin: '0 auto',
            marginBottom: '15px'
        }
        console.log(this.state);
        const { history } = this.props;
        const { que1, que2, que3 } = this.state;
        return (
            <>
                <p>1. I was stressed with my nerves on edge.</p>
                <Button.Group selected={this.state.que1} widths="5" onClick={this.handleClick} style={styles}>
                    <Answers style={{ backgroundColor: 'red' }} />
                </Button.Group>
                {` `}
                <p>2. I lost hope and wanted to give up when something went wrong.</p>
                <Button.Group selected={this.state.que2} widths="5" onClick={this.handleClick2} style={styles}>
                    <Answers style={{ backgroundColor: 'red' }} />
                </Button.Group>
                {` `}
                <p>3. I feel very satisfied with the way I look and act</p>
                <Button.Group selected={this.state.que3} widths="5" onClick={this.handleClick3} style={styles}>
                    <Answers style={{ backgroundColor: 'red' }} />
                </Button.Group>
                <p />
                {` `}
                <Button
                    disabled={!que1 || !que2 || !que3}
                    onClick={() => history.push("/section2", [this.state])}
                >
                    NEXT
        </Button>
            </>
        );
    }
}

export default withRouter(Section);

enter image description here

Section2.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Button } from "semantic-ui-react";
import Answers from "../Answers/Answers";
import CommonButton from "../CommonButton/CommonButton";
import SectionIndicator from "../../components/SectionIndicator/SectionIndicator";

export class Section2 extends Component {

    state = {
        que4: "",
        que5: ""
    };

    handleClick4 = event => {
        this.setState(
            {
                que4: event.target.attributes.getNamedItem("data-key").value
            },
            () => {
                console.log(this.state.que4);
            }
        );
    };

    handleClick5 = event => {
        this.setState(
            {
                que5: event.target.attributes.getNamedItem("data-key").value
            },
            () => {
                console.log(this.state.que5);
            }
        );
    };

    handleClickForSubmit = () => {
        console.log(this.state)
    }


    render() {
        let styles = {
            width: '50%',
            margin: '0 auto',
            marginBottom: '15px'
        }

        let style2 = {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between'
        }
        console.log(this.state);
        const { history } = this.props;
        return (
            <div style={{ textAlign: 'center' }}>
                <SectionIndicator value={"2"} total={"2"} progress={"ratio"} />
                <p>4. How many times do you eat in a day when you are stressed.</p>
                <Button.Group widths="5" onClick={this.handleClick4} style={styles}>
                    <Answers />
                </Button.Group>

                <span />
                <p>5. Do you prefer to work when you are stressed.</p>

                <Button.Group widths="5" onClick={this.handleClick5} style={styles}>
                    <Answers />
                </Button.Group>
                <Link to="/assess" style={style2}>
                    {" "}
                    <CommonButton text={"PREVIOUS"} onClick={() => history.goBack()} />
                    <CommonButton text={"SUBMIT"} onClick={this.handleClickForSubmit} />
                </Link>
            </div>
        );
    }
}

export default Section2;

enter image description here

输出::

enter image description here

reactjs
1个回答
0
投票

有很多方法可以在页面更改中保留数据:

  1. 使用Redux全局状态管理系统。
  2. 使用具有组件状态所需的所有值的表单组件。关键是确保不会卸载(销毁)此组件,否则所有状态都将消失。
  3. 使用LocalStorage或SessionStorage保存/检索值。
  4. 将值保存到窗口对象(不是一个非常优雅的解决方案)
© www.soinside.com 2019 - 2024. All rights reserved.