单击按钮从一个页面导航到另一个页面

Question

嘿，我正在尝试制作一个学生管理系统，我在其中制作了一个登录页面、注册页面和一个仪表板页面。 现在，从我的仪表板页面单击“填充详细信息”按钮时，我需要导航到另一个页面 input.js（这实际上是一个单独的项目）。我将在下面链接我的代码。请帮助我完成它！

//input.js
    import React, { Component } from 'react';
    import web3 from './web3';
    import ipfs from './ipfs';
    import storehash from './storehash';
    import { Button } from 'reactstrap';


    class MyComponent extends Component {
      state = {      
        ipfsHash:null,      
        buffer:'',      
        ethAddress:'',      
        transactionHash:'',      
        txReceipt: ''    
      };


      //Take file input from user
      captureFile =(event) => {event.stopPropagation() 
        event.preventDefault() 
        const file = event.target.files[0] 
        let reader = new window.FileReader() 
        reader.readAsArrayBuffer(file) 
        reader.onloadend = () => this.convertToBuffer(reader) };


      //Convert the file to buffer to store on IPFS 
          convertToBuffer = async(reader) => {

      //file is converted to a buffer for upload to IPFS        
          const buffer = await Buffer.from(reader.result);   

      //set this buffer-using es6 syntax        
           this.setState({buffer});};

      //ES6 async 
        functiononClick = async () => {try{this.setState({blockNumber:"waiting.."});        
        this.setState({gasUsed:"waiting..."});
        await web3.eth.getTransactionReceipt(this.state.transactionHash, (err, txReceipt)=>{          
          console.log(err,txReceipt);          
          this.setState({txReceipt});        
        });    
      }

      catch(error){      
        console.log(error);   
       }}


       onSubmit = async (event) => {      
         event.preventDefault();

         //bring in user's metamask account address      
         const accounts = await web3.eth.getAccounts();   

         //obtain contract address from storehash.js      
         const ethAddress= await storehash.options.address;      
         this.setState({ethAddress});    

         //save document to IPFS,return its hash#, and set hash# to state      
         await ipfs.add(this.state.buffer, (err, ipfsHash) => {        
           console.log(err,ipfsHash);        

           //setState by setting ipfsHash to ipfsHash[0].hash        
           this.setState({ ipfsHash:ipfsHash[0].hash });       
           
           
           // call Ethereum contract method "sendHash" and .send IPFS hash to etheruem contract       
          //return the transaction hash from the ethereum contract        
          storehash.methods.sendhash(this.state.ipfsHash).send({          
            from: accounts[0]        
          }, 
            (error, transactionHash) => {          
            console.log(transactionHash);          
            this.setState({transactionHash});        
          });  

          

        })    
      };


      render() {
        return (        
        <div className="App">          
        <header className="App-header">  
        <h1>EduDecentro</h1>          
        </header>

        <hr/>
        <grid>          
          <h5> Choose Transcript file  </h5>          
          <form onSubmit={this.onSubmit}>            
          <input              
          type = "file"              
          onChange = {this.captureFile}            
          />             
          <Button             
          bsStyle="primary"             
          type="submit">             
          Send it             
          </Button> 
          </form>
          <tbody>                 
             <tr>                   
               <td>IPFS Hash</td>                   
                <td> : </td>                    
                <td>{this.state.ipfsHash1}</td>                  
                </tr>
          </tbody>
          

          <h5> Choose Certificate-1 file  </h5>          
          <form onSubmit={this.onSubmit}>            
          <input              
          type = "file"              
          onChange = {this.captureFile}            
          />             
          <Button             
          bsStyle="primary"             
          type="submit">             
          Send it             
          </Button> 
          </form>
          <tbody>                 
             <tr>                   
               <td>IPFS Hash</td>                   
                <td> : </td>                    
                <td>{this.state.ipfsHash2}</td>                  
                </tr>
          </tbody>

          <h5> Choose Certificate-2 file  </h5>          
          <form onSubmit={this.onSubmit}>            
          <input              
          type = "file"              
          onChange = {this.captureFile}            
          />             
          <Button             
          bsStyle="primary"             
          type="submit">             
          Send it             
          </Button> 
          </form>

          <h5> Choose Resume file  </h5>          
          <form onSubmit={this.onSubmit}>            
          <input              
          type = "file"              
          onChange = {this.captureFile}            
          />             
          <Button             
          bsStyle="primary"             
          type="submit">             
          Send it             
          </Button> 
          

          </form><hr/> 
          </grid>     
        </div>      
       );    
    }}

     export default MyComponent;






    



    import React from 'react';


    import {Link } from "react-router-dom";

     
    function Dashboard(props) {
     
      // handle click event of logout button
      const handleLogout = () => {    
        props.history.push('/Sign-in');
      }

      
     
      return (
        <div>
          Welcome User!<br /><br />
          <Link to="/input"><button>
                  Fill Details 
                </button>
                </Link>

          <input type="button" onClick={handleLogout} value="Logout" />
        </div>
      );
    }
     
    export default Dashboard;

Answer 1

您所要做的就是为您的Fill Details 按钮添加事件监听器，您不需要将它包装到Link 组件中。示例如下：

<button onClick={() => window.location.href = 'YOUR_LINK_TO_ANOTHER_APP' }>
  Fill Details 
</button>

Answer 2

<button onClick="window.location.href='Second_App_Page_Link';">Click Here
</button>