Wenn man in React in Formulare Input-Felder verwendet und diese mit value=this.state.variable definiert, dann sind die Eingaben nicht mehr speicherbar.
Es gibt 2 Wege wie man die React Input Felder bearbeitbar macht:
1) defaultValue anstatt value verwenden
2) React TextField or Form <input..> mit value und inline-onChange Function
3) React Form <input..> mit defaultValue
Version1: value mit state verwenden, aber auch onChange setValue verwenden
React Input oder TextField mit value und onChange
<TextField value={this.state.title} onChange={this.handleChange} /> |
Event-Handler Im Constructor der React Component:
constructor(props) { .. this.handleChange = this.handleChange.bind(this); }
|
Function in der React Componente einfΓΌgen
handleChange(event) { this.setState({ title: event.target.value }); } |
Version2: React TextField or Form <input..> mit value und 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%' }} /> |
Beispiel Code Input mit 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 >-------- }
|