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>
        );
    }
}

我得到的错误是：它不会理解这是一个功能的地方。我如何定义父母/子女关系？仅从一个组件调用组件到另一组件是不够的？

我是新来的反应者，所以我对那些概念不太了解。

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的地方？

在React中将FormData从模式发送到父组件的方法

1 个答案: