在反应中将数据从一个页面传递到另一个页面

如何解决在反应中将数据从一个页面传递到另一个页面

我在一页上有一个表单,其中包含一个图像、名称和描述以及一个“书籍”按钮。我想将所有这些值传递到另一个页面。

这是显示数据的页面。我有很多包含不同数据的表单。


function TherapistEntry(props) {

    const [therapistDetails,setTherapistDetails] = useState({
        name: ""
    })
    
    function storeName(event) {
        setTherapistDetails({
            name: event.target.value
        })

        
    }
    function redirectPage() {
        // PassName(therapistDetails.name)
        props.history.push('/publicTherapistProfile')
    }

    return (
        <div className="album py-5 bg-light">
            <div className="container">
                <div className="row">
                    {therapists.map(properties => {
                        return (
                            <div className="col-lg-3 col-md-4 col-sm-6">
                                <div className="card mb-4 shadow-sm">
                                    <ProfileImage image={properties.image} name="image" />

                                    <div className="card-body">
                                        <p className="card-text" onChange={storeName} name="name">Name: {properties.name}</p>
                                        <p className="card-text" description="description">Description: {properties.description.substring(1,100)}
                                        </p>
                                        <div className="d-flex justify-content-between align-items-center">
                                            <div className=" btn-group">
                                                <button onClick={redirectPage} type="button" className="viewButtonHover btn btn-md btn-outline-secondary">View</button>
                                            </div>
                                            <small className="text-muted">5 Stars</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>

    )

}

export default withRouter(TherapistEntry)

我首先尝试通过存储到状态来使用名称值进行测试。 onChange 似乎是存储它的唯一方法。

然后我想将这些存储的值传递给这个页面。

function IndividualTherapistPage(props) {

    const [passedTherapist,setPassedTherapist] = useState({
        name: ""
    })

    return (
        <div>
            <Header />
            <div>
                <div className="row">
                    <div className="alignTherapist col-lg-8 col-md-8 col-sm-8">
                        <div className="container">
                            <h2>Individual Therapist Section</h2>
                        </div>
                    </div>

                    <div className="team-boxed col-lg-8 col-md-8 col-sm-8">
                        <div className="container">
                            <div class="intro">
                                <h2 class="text-center">Therapist </h2>
                                <p class="text-center">Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat,pellentesque ut laoreet vitae.</p>
                            </div>
                            <TherapistOfInterestToPurchase name={passedTherapist.name}/>
                        </div>
                    </div>

                    <div className="col-lg-4 col-md-4 col-sm-4">
                        <h2 style={{ flex: 1,justifyContent: "center",alignItems: "center" }}>Book</h2>
                    </div>
                </div>
            </div>
            {/* <Footer /> */}
        </div>
    )

}
export default IndividualTherapistPage;

有人知道我该怎么做吗?

解决方法

我认为最简单的方法是使用 localStorage 或 HTTP GET 参数。

另一种(更高级)的方法是使用 react-router 和某种全局状态管理。

,

在 react 中,您通过 props 将状态从父级转移到子级。在您的场景中,您可以通过 Redux 来完成。这是用于全局状态管理。

,

您可以将 params 中的这些值传递到另一个页面,然后按照下面这个主题的示例获取它。

react-router-pass-param-to-component

没有必要使用 localstorage 或 redux 来做类似的事情。

,

有多种方法可以做到这一点。

  1. 这是最简单的方法,如果您没有太多要在页面之间发送的内容,则可以使用 localStorage 浏览器 API。您也可以在 reactjs-localstorage 的帮助下完成。

  2. 这有点复杂,但从长远来看,随着规模的扩大,可能会更好,请使用 Redux 全局状态管理来实现这一点。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?