#

 

 

Beispiel Code mit onClick Event auf einen React Link  oder HTML Link

 

 

Variante 1: Mit HTML a href

 

<a href="/" onClick={this.onClickSubmit}>

 <Fab color="secondary" aria-label="save and show" style={{ float: 'right' }} >

  <RemoveRedEye />

 </Fab>

</a>

 

Dann muss man nur noch direkt die Funktion in die Component einfügen

    onClickSubmit(event) {

        event.preventDefault(); //stops a href=url

        alert('you clicked me');

        //later:browserHistory.push('/');

    }

 

Variante 2: mit 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>

 

 

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

}

 

 

Mobile

.

0123movie.net