在反應中將FormData從模態發送到父組件的方法

Question

我在調用父方法時遇到問題 - 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>
        );
    }
}

我得到的錯誤是：它不會理解它是 function .. 我如何定義父/子關系？ 僅僅將組件從一個組件調用到另一個組件還不夠嗎？

我是反應新手，所以我不太了解這些概念。

Answer 1

你做錯了

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 的位置？