Error message:
× TypeError: Cannot read property 'send_Data_to_Api' of undefined onClickSubmit D:/Programmierung/Web/CodeDocu_de/CodeDocu/ClientApp/src/components/Edit.js:55 52 |
//====< functions >====
|
When calling a function in React
onClickSubmit(event) { this.send_Data_to_Api(); } |
Solution:
You have to connect the function in the constructorn, otherwise this is not recognized or defined.
this.onClickSubmit = this.onClickSubmit.bind(this); //for using this.function() in component |
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: "" }
this.onClickSubmit = this.onClickSubmit.bind(this); //for using this.function() in component }
//--< component.events >-- componentDidMount() { this.get_Data_from_Api(this.props.match.params.id); } //--</ component.events >-- //----</ compontent >----
//====< functions >==== onClickSubmit(event) { this.send_Data_to_Api(); }
//*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" //});
alert('Data are 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 >-------- }
//event.preventDefault(); //stops a href=url //later:browserHistory.push('/'); |