CodeDocu.com

 

 

 

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

Make React Input Editable

 

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

Make React Input Editable

<TextField

  value={this.state.title}

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

/>

                                                                                        

 

 

Version3: React Form <input.. > mit defaultValue

Make React Input Editable

 

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

}

 

 

 


Software Entwicklung Stuttgart Nürtingen
Suche Projekte C#, WPF, Windows App,ASP.Net, vb.Net, WinForms, SQL Server, Access, Excel