Example code with onClick event on a React Link or HTML Link
Variant 1: With HTML a href
<a href="/" onClick={this.onClickSubmit}> <Fab color="secondary" aria-label="save and show" style={{ float: 'right' }} > <RemoveRedEye /> </Fab> </a> |
Then you only have to insert the function directly into the component
onClickSubmit(event) { event.preventDefault(); //stops a href=url alert('you clicked me'); //later:browserHistory.push('/'); } |
Variant 2: with LINK
import { Link } from 'react-router-dom' |
<Link href="/" onClick={this.onClickSubmit}> <Fab color="secondary" aria-label="save and show" style={{ float: 'right' }} > <RemoveRedEye /> </Fab> </Link> |
Example React Code:
import React, { Component } from 'react'; import './Edit.css'; import "bootstrap/dist/css/bootstrap.min.css"; //import { browserHistory } from 'react-router' import Fab from '@material-ui/core/Fab'; import RemoveRedEye from '@material-ui/icons/RemoveRedEye'; import TextField from '@material-ui/core/TextField'; import { Link } from 'react-router-dom'
export class Edit extends Component { //--------< component: Article >--------
//----< compontent >---- baseURL = "/";
constructor(props) { //-< react: parameter > super(props); //-</ react: parameter > //--< react: variables >-- this.state = { idarticle: 0, IDUser: "", title: "", TextContent: "", HtmlContent: "", Folder: "", Keywords: "", nImages: "", nVideos: "", nFiles: "", DtCreated: "", DtEdit: "", loading: true, status: "" }
}
//--< component.events >-- componentDidMount() { this.get_Data_from_Api(this.props.match.params.id); } //--</ component.events >-- //----</ compontent >----
//====< functions >====
onClickSubmit(event) { event.preventDefault(); //stops a href=url alert('you clicked me'); //later:browserHistory.push('/'); }
//*load data from web api async get_Data_from_Api(id) { //--------< populateData() >-------- const response = await fetch('api/articles/' + id); //*get web_data from web api as json-string const data = await response.json(); //*convert json to data //console.log("this.state=" + this.state); //console.log(this.state);
this.setState(state => ({ idarticle: data.idArticle, iduser: data.idUser, title: data.title, textcontent: data.textContent, htmlcontent: data.htmlContent, folder: data.folder, keywords: data.keywords, nimages: data.nImages, nvideos: data.nVideos, nfiles: data.nFiles, dtcreated: data.dtCreated, dtedit: data.dtEdit, loading: false,
})); //*refresh state of arcticles //--------</ populateData() >-------- }
async send_Data_to_Api() {
const id = this.state.idarticle; const requestOptions = { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify( { title: this.state.title,
}) }; const response = await fetch('api/articles/' + id, requestOptions); const data = await response.json(); this.setState({ idArticle: data.id, status: "data is send" });
}
//====</ functions >====
//====< HTML >==== //----< render >---- render() { //--------< render(HTML) >--------
document.title = "✍ " + this.state.title;
return (
//----< return >---- <div className="submit-form"> { //--< IsLoaded >-- <form className="submit-form"> <div> <Link href="/" onClick={this.onClickSubmit}> <Fab color="secondary" aria-label="save and show" style={{ float: 'right' }} > <RemoveRedEye /> </Fab> </Link>
<TextField id="ctltitle" label="Title" type="text" placeholder="Title" autoComplete required fullWidth color="primary" InputLabelProps={{ shrink: true, }} value={this.state.title} onChange={(e) => { this.setState({ title: e.target.value }) }} style={{ width: '100%' }} />
<div style={{ marginTop: '10px' }}> <button type="submit">Update</button> </div> </div>
<input type="hidden" value={this.state.idarticle} /> </form> //--</ IsLoaded >-- } </div> //----</ return >---- ); //--------</ render(HTML) >-------- } //----</ render >----
//====</ HTML >====
//--------</ component: Articles >-------- } |