javascript — отправка FormData из метода модального в родительский компонент в реакции

Отправка FormData из метода модального в родительский компонент в реакции

У меня проблема с вызовом родительского метода — HandleInsert (formData) с аргументом «formData», который создается на дочернем компоненте.

На родительском компоненте (соответствующий код)

 addModalClose = () ={amp}gt; { this.setState( { addModalShow : false }); } addModalOpen = () ={amp}gt; { this.setState( { addModalShow : true }); } {amp}lt;Button id="button" className="add_ticket" onClick={this.addModalOpen}{amp}gt;New Ticket{amp}lt;/Button{amp}gt; {amp}lt;AddModal show={this.state.addModalShow} onHide={this.addModalClose} onSubmit={this.HandleInsert} /{amp}gt; 

На дочернем компоненте: (сам модал)

 import React, {Component} from 'react' import {Modal, Button, Row, Col, Form} from 'react-bootstrap'; import {App} from './App' export class AddModal extends Component { constructor(props) { super(props); this.state = { email : "", title : "", content : "" } } onHide; onSubmit; handleEmailChange = e ={amp}gt; { this.setState({email: e.target.value}); }; handleTitleChange = e ={amp}gt; { this.setState({title: e.target.value}); }; handleContentChange = e ={amp}gt; { this.setState({content: e.target.value}); }; render(){ let formData = new FormData(); return( {amp}lt;Modal {...this.props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered {amp}gt; {amp}lt;Modal.Header closeButton{amp}gt; {amp}lt;Modal.Title id="contained-modal-title-vcenter"{amp}gt; Ticket Details: {amp}lt;/Modal.Title{amp}gt; {amp}lt;/Modal.Header{amp}gt; {amp}lt;Modal.Body{amp}gt; {amp}lt;Form{amp}gt; {amp}lt;Form.Group controlId="exampleForm.ControlInput1" {amp}gt; {amp}lt;Form.Label{amp}gt;Email:{amp}lt;/Form.Label{amp}gt; {amp}lt;Form.Control type="email" placeholder="name@example.com" value={this.state.email} onChange={this.handleEmailChange}/{amp}gt; {amp}lt;/Form.Group{amp}gt; {amp}lt;Form.Group controlId="exampleForm.ControlInput2"{amp}gt; {amp}lt;Form.Label{amp}gt;Title:{amp}lt;/Form.Label{amp}gt; {amp}lt;Form.Control type="title" value={this.state.title} onChange={this.handleTitleChange}/{amp}gt; {amp}lt;/Form.Group{amp}gt; {amp}lt;Form.Group controlId="exampleForm.ControlTextarea1"{amp}gt; {amp}lt;Form.Label{amp}gt;Content:{amp}lt;/Form.Label{amp}gt; {amp}lt;Form.Control as="textarea" rows="3" value={this.state.content} onChange={this.handleContentChange}/{amp}gt; {amp}lt;/Form.Group{amp}gt; {amp}lt;/Form{amp}gt; {amp}lt;/Modal.Body{amp}gt; { formData.append("id", "bded4175-a519-5dee-abed-014e7242e6f0")} { formData.append("title", this.state.title)} { formData.append("content", this.state.content)} { formData.append("userEmail",this.state.email)} { formData.append("creationTime", new Date())} {amp}lt;Modal.Footer{amp}gt; {amp}lt;Button variant="success" onClick={this.props.HandleInsert(formData)}{amp}gt;Create{amp}lt;/Button{amp}gt; {amp}lt;Button variant="danger" onClick={this.props.onHide}{amp}gt;Close{amp}lt;/Button{amp}gt; {amp}lt;/Modal.Footer{amp}gt; {amp}lt;/Modal{amp}gt; ); } } в import React, {Component} from 'react' import {Modal, Button, Row, Col, Form} from 'react-bootstrap'; import {App} from './App' export class AddModal extends Component { constructor(props) { super(props); this.state = { email : "", title : "", content : "" } } onHide; onSubmit; handleEmailChange = e ={amp}gt; { this.setState({email: e.target.value}); }; handleTitleChange = e ={amp}gt; { this.setState({title: e.target.value}); }; handleContentChange = e ={amp}gt; { this.setState({content: e.target.value}); }; render(){ let formData = new FormData(); return( {amp}lt;Modal {...this.props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered {amp}gt; {amp}lt;Modal.Header closeButton{amp}gt; {amp}lt;Modal.Title id="contained-modal-title-vcenter"{amp}gt; Ticket Details: {amp}lt;/Modal.Title{amp}gt; {amp}lt;/Modal.Header{amp}gt; {amp}lt;Modal.Body{amp}gt; {amp}lt;Form{amp}gt; {amp}lt;Form.Group controlId="exampleForm.ControlInput1" {amp}gt; {amp}lt;Form.Label{amp}gt;Email:{amp}lt;/Form.Label{amp}gt; {amp}lt;Form.Control type="email" placeholder="name@example.com" value={this.state.email} onChange={this.handleEmailChange}/{amp}gt; {amp}lt;/Form.Group{amp}gt; {amp}lt;Form.Group controlId="exampleForm.ControlInput2"{amp}gt; {amp}lt;Form.Label{amp}gt;Title:{amp}lt;/Form.Label{amp}gt; {amp}lt;Form.Control type="title" value={this.state.title} onChange={this.handleTitleChange}/{amp}gt; {amp}lt;/Form.Group{amp}gt; {amp}lt;Form.Group controlId="exampleForm.ControlTextarea1"{amp}gt; {amp}lt;Form.Label{amp}gt;Content:{amp}lt;/Form.Label{amp}gt; {amp}lt;Form.Control as="textarea" rows="3" value={this.state.content} onChange={this.handleContentChange}/{amp}gt; {amp}lt;/Form.Group{amp}gt; {amp}lt;/Form{amp}gt; {amp}lt;/Modal.Body{amp}gt; { formData.append("id", "bded4175-a519-5dee-abed-014e7242e6f0")} { formData.append("title", this.state.title)} { formData.append("content", this.state.content)} { formData.append("userEmail",this.state.email)} { formData.append("creationTime", new Date())} {amp}lt;Modal.Footer{amp}gt; {amp}lt;Button variant="success" onClick={this.props.HandleInsert(formData)}{amp}gt;Create{amp}lt;/Button{amp}gt; {amp}lt;Button variant="danger" onClick={this.props.onHide}{amp}gt;Close{amp}lt;/Button{amp}gt; {amp}lt;/Modal.Footer{amp}gt; {amp}lt;/Modal{amp}gt; ); } } 

ошибка, которую я получаю, заключается в следующем: где это не поймет, что это функция .. как я определяю отношения родителя / ребенка? не достаточно просто вызвать компонент из одного компонента в другой?

Я новичок в реакции, поэтому я не очень хорошо понимаю эти понятия.

введите описание изображения здесь

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector