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