嘿,我正在尝试制作一个学生管理系统,我在其中制作了登录页面、注册页面和仪表板页面。 现在,当从我的仪表板页面单击按钮“填充详细信息”时,我需要导航到另一个页面 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;
答案 0 :(得分:0)
您所要做的就是为您的 Fill Details
按钮添加事件侦听器,您无需将其包装到 Link
组件中。例子如下:
<button onClick={() => window.location.href = 'YOUR_LINK_TO_ANOTHER_APP' }>
Fill Details
</button>
答案 1 :(得分:0)
<button onClick="window.location.href='Second_App_Page_Link';">Click Here
</button>