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

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

0 голосов
/ 19 октября 2019

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

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

addModalClose = () => {
        this.setState( {
            addModalShow : false
        });
    }

    addModalOpen = () => {
        this.setState( {
            addModalShow : true
        });
}

async HandleDelete(id : string) {
        this.setState({
            tickets: await api.deleteTickets(id)
        })
    }


and I update props of Modal here:

<Button id="button" className="add_ticket" onClick={this.addModalOpen}>New Ticket</Button>
                        {/*define new props for Modal component in parent component*/}
                        <AddModal
                            show={this.state.addModalShow}
                            onHide={this.addModalClose}
                            onSubmit={this.HandleInsert}
                        />

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

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 => {
        this.setState({email: e.target.value});
    };
    handleTitleChange = e  => {
        this.setState({title: e.target.value});
    };
    handleContentChange = e => {
        this.setState({content: e.target.value});
    };



    render(){
        let formData = new FormData();
        return(
            <Modal
                {...this.props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Ticket Details:
                    </Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <Form>
                        <Form.Group controlId="exampleForm.ControlInput1" >
                            <Form.Label>Email:</Form.Label>
                            <Form.Control type="email" placeholder="name@example.com" value={this.state.email} onChange={this.handleEmailChange}/>
                        </Form.Group>
                        <Form.Group controlId="exampleForm.ControlInput2">
                            <Form.Label>Title:</Form.Label>
                            <Form.Control type="title" value={this.state.title} onChange={this.handleTitleChange}/>
                        </Form.Group>
                        <Form.Group controlId="exampleForm.ControlTextarea1">
                            <Form.Label>Content:</Form.Label>
                            <Form.Control as="textarea" rows="3" value={this.state.content} onChange={this.handleContentChange}/>
                        </Form.Group>
                    </Form>
                </Modal.Body>

                { 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())}

<Modal.Footer>
                    <Button variant="success" onClick={() => this.props.onSubmit(formData)}>Create</Button>
                    <Button variant="danger" onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

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

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

enter image description here

1 Ответ

1 голос
/ 19 октября 2019

вы делаете это неправильно 

onCreate(formData)={this.HandleInsert(formData)}

это должно быть похоже на 

    onCreate={(formData)=>{this.HandleInsert(formData)}}

обновленный ответ

1. Где HandleInsert определен в родительском компоненте??? 

<Button id="button" className="add_ticket" onClick={this.addModalOpen}>New 
 Ticket</Button>
            <AddModal
            show={this.state.addModalShow}
            onHide={this.addModalClose}
            onSubmit={this.HandleInsert}
            />

2. Ваш дочерний компонент может не получать HandleInsert от родительского компонента в качестве реквизита. 3. поскольку я могу видеть в текущем коде 

 <Modal.Footer>
     <Button variant="success" onClick={this.props.HandleInsert(formData)}>Create</Button>
     <Button variant="danger" onClick={this.props.onHide}>Close</Button>
 </Modal.Footer>

, что вы снова вызываете handleInsert неверным образом, это должно быть похоже на 

 onClick={()=>{this.props.HandleInser(formData)}}

другая вещь - это когда FormData определяется или импортируется в вашкод ??

...