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

Make React Input Editable

25.02.2021 (👁22030)

Make React Input Editable

 

 

If you use ormular input fields in Reactand define them with value=this.state.variable, then the inputs are no longer saveable.

There are 2 ways to make the React Input fields editable:

 

1.               Use defaultValue instead of value

2.               React TextField or Form <input.. > with value and inline-onChange Function

3.               React Form <input.. > with defaultValue

 

Version1: Use value with state, but also use onChange setValue

 

React Input or TextField mit value and onChange

 

<TextField

  value={this.state.title}

  onChange={this.handleChange}

/>

 

Event Handler In the  Constructor of the React Component:

 

constructor(props) {

..

this.handleChange = this.handleChange.bind(this);

}

 

 

Insert Function in react componente

 

handleChange(event) {

  this.setState({ title: event.target.value });

}

 

 

Version2: React TextField or  Form <input.. >  with value and inline-onChange Function

<TextField

  value={this.state.title}

  onChange={(e) => { this.setState({ title: e.target.value }) }}

/>

                                                                                        

 

 

Version3: React Form <input.. > mit defaultValue

 

<input

  defaultValue={this.state.title}

  style={{ width: '100%' }}

/>

 

 

Example Code Input with value und onChange

 

import React, { Component } from 'react';

import './Edit.css';

import "bootstrap/dist/css/bootstrap.min.css";

import Fab from '@material-ui/core/Fab';

import RemoveRedEye from '@material-ui/icons/RemoveRedEye';

import { Link } from 'react-router-dom'

import TextField from '@material-ui/core/TextField';

export class Edit extends Component {

    //--------< component: Article >--------

    //----< compontent >----

    baseURL = "/";

    constructor(props) {

        //-< react: parameter >

        super(props);

        //-</ react: parameter >

        //--< react: variables >--

        this.state = {

            idarticle: 0,

            loading: true,

            IDUser: "",

            title: "",

            TextContent: "",

            HtmlContent: "",

            Folder: "",

            Keywords: "",

            nImages: "",

            nVideos: "",

            nFiles: "",

            DtCreated: "",

            DtEdit: ""

        }

        this.handleChange = this.handleChange.bind(this);

        this.handleSubmit = this.handleSubmit.bind(this);

    }

    handleChange(event) {

        this.setState({ title: event.target.value });

    }

    handleSubmit(event) {

        alert('A name was submitted: ' + this.state.value);

        event.preventDefault();

    }

    //--< component.events >--

    componentDidMount() {

        this.populateData(this.props.match.params.id);

    }

    //--</ component.events >--

    //----</ compontent >----

    //====< functions >====

    //*load data from web api

    async populateData(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() >--------

    }

    //====</ functions >====

    //====< HTML >====

    //----< render >----

    render() {

        //--------< render(HTML) >--------

        document.title = " " + this.state.title;

        return (

            //----< return >----     

            <div className="submit-form">

                {

                    //--< IsLoaded >--

                    <form className="submit-form">

                        <div>

                            <Link to={"/👁/" + this.state.idarticle}><Fab color="secondary" aria-label="save and show" style={{ float: 'right' }} >

                                <RemoveRedEye />

                            </Fab>

                            </Link>

                           

                            <TextField

                                value={this.state.title}

                                onChange={this.handleChange}

                                //defaultValue={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 >--------

}