尝试使用 react js 创建多功能按钮{第一次点击 - 保存数据，打开“查看”，第二次点击 - 导航到保存的页面}

编程问答 2022-05-16

问题描述

我正在尝试在 React Js (MERN STACK) 中创建一个多功能按钮，它最初是一个“保存”按钮。单击时，它应该理想地将行数据发布到 MongoDB，一旦数据被存储并且达到 200 响应状态，它应该转换为“查看”按钮，该按钮将有一个链接以导航到查看保存的数据页面。我尝试了很多方法，但都无法达到要求的目标。我应该怎么办？你的帮助真的很可观。非常感谢您.....！

[下方图片链接]

import React,{ useState } from 'react';
import axios from 'axios';

export default function SaveButton( {cTag} ) {
    
    //  cTag prop holds the values of row data in object format as shown in the given figure.

    console.log(cTag);
    const [saveBtn,setViewBtn] = useState("Save");

    const {name,symbol,mCap,cVal} = cTag;

    const SaveCompany = () => {
            const companyData = {
                name:name,symbol:symbol,mCap: mCap,cVal: cVal
            }

      
            axios.post('http://localhost:8082/api/books',companyData).then((response) => {
                    
                    console.log(response.status);
                    setViewBtn("View");
                    window.alert("Data Submitted Successfully...!")
    
                }).catch(() => {
                    alert("Data Didnt Save");
                })
            
    }

    return (
        <>
            <button className = "btn btn-sm btn-primary" onClick = {SaveCompany}> {saveBtn} </button>
        </>
    )
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

解决方法

不要从按钮调用 saveCompany，你需要另外两个函数，视图和条件：

const handleClick = () => {
  switch(saveBtn) {
    case "Save" : saveCompany(); break;
    case "View" : viewCompany(); break;
  }
}
...
<button className = "btn btn-sm btn-primary" onClick = {handleClick}> {saveBtn} </button>
javascriptmernreact-hooksreactjsreactjsreactjsreactjs