Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

React: Link with onClick

25.02.2021 (👁21397)


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 >--------

}