如何在反应中将数据从表单组件呈现到表格中？

Question

在构建基本调度网站时，我对 react 和尝试学习 react 概念非常陌生。 在这里，我从输入字段中获取数据并存储在状态中，但是如何将此表单数据呈现给表格组件？ 下面我分享代码和文件结构 事件组件又名主组件

import React from "react";
import {Container, Row, Table} from "react-bootstrap";
import EventModal from "./EventModalButton";

class EventList extends React.Component{
    render() {
        return (
            <Container fluid="md">
                <Table striped bordered hover>
                    <thead>
                    <tr>
                        <th>Title</th>
                        <th>Type</th>
                        <th>Time</th>
                        <th>Date</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Python workshop</td>
                        <td>WorkShop</td>
                        <td>12:00PM</td>
                        <td>Saturday, 29/08/2020</td>
                    </tr>
                    <tr>
                        <td>Pandemic Situation</td>
                        <td>Webinar</td>
                        <td>02:00PM</td>
                        <td>Saturday, 29/08/2020</td>
                    </tr>
                    </tbody>
                </Table>

                <Container className="row"/>
                <Row className="justify-content-center">
                    // Open Modal Form to Add new Data
                    <EventModal />
                </Row>
            </Container>
        );
    }
}
export default EventList;

EventModal.js 包含 EventForm 组件

import React, { useState } from "react";
import {Button, Modal} from "react-bootstrap";
import EventForm from "./EventForm";



function EventModal() {
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <>
            <Button variant="primary" onClick={handleShow}>
                Add New Event
            </Button>

            <Modal
                show={show}
                onHide={handleClose}
                backdrop="static"
                keyboard={false}
            >
                <Modal.Header closeButton>
                    <Modal.Title>New Event</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <EventForm />
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}
export default EventModal;

添加新日期的表单

import React from "react";
import {Button, Container, Form} from "react-bootstrap";
import CustomDatePicker from "./CustomDatePicker";

const timeSlots = [

    {
        id: 1,
        value: '11:30AM'
    },
    {
        id: 2,
        value: '12:00PM'
    },
    {
        id: 3,
        value: '12:30PM'
    },
    {
        id: 4,
        value: '01:00PM'
    },
    {
        id: 5,
        value: '01:30PM'
    },
    {
        id: 6,
        value: '02:00PM'
    },
    {
        id: 7,
        value: '02:30PM'
    },
    {
        id: 8,
        value: '03:00PM'
    },
];

const eventTypes = [
    {
        id: 1,
        value: 'Webinar',
    },
    {
        id: 2,
        value: 'Workshop',
    },
    {
        id: 3,
        value: 'Confernece',
    },
];

// for time slots
function Options({ options }) {
        return (
          options.map(option =>
              <option key={option.id} value={option.value}>
                  {option.value}
              </option>)
        );
}

// for event types
function Option({ options }) {
    return (
        options.map(option =>
            <option key={option.id} value={option.value}>
                {option.value}
            </option>)
    );
}


class EventForm extends React.Component{

    constructor() {
        super();
        this.state = {
            title: '',
            eventtype: null,
            time: null,
        }
    }

    handleTitleChange = (event) => {
        this.setState({
            title: event.target.value
        })
    };

    handleTypeChange = (event) => {
        this.setState({
            eventtype: event.target.value
        })
    };

    handleTimeChange = (event) => {
        this.setState({
            time: event.target.value
        })
    };

    handleSubmit = () => {
      alert(`${this.state.title} ${this.state.eventtype}, ${this.state.time}`)
    };

    render() {
        return (
            <Container fluid>

                <Form onSubmit={this.handleSubmit}>
                    <Form.Group controlId="Title">
                        <Form.Label>Title</Form.Label>
                        <Form.Control    placeholder="Event Title"
                                         name="title"
                                         value={this.state.title}
                                         onChange={this.handleTitleChange}/>
                    </Form.Group>

                    <Form.Group controlId="EventType">
                        <Form.Label>Event Type</Form.Label>
                        <Form.Control as="select"
                                      name="eventtype"
                                      value={this.state.eventtype}
                                      onChange={this.handleTypeChange}>
                            <Option options={eventTypes} />
                        </Form.Control>
                    </Form.Group>

                    <Form.Group controlId="Slots">
                        <Form.Label>Time Slots</Form.Label>
                        <Form.Control as="select"
                                      name="time"
                                      value={this.state.time}
                                      onChange={this.handleTimeChange}>
                            <Options options={timeSlots} />
                        </Form.Control>
                    </Form.Group>

                    <Form.Group controlId="datepicker">
                        <Form.Label>Date</Form.Label>
                        <br/>
                        <CustomDatePicker/>
                    </Form.Group>
                        <Button
                            variant="primary"
                            type="submit">
                            Submit
                        </Button>
                </Form>

            </Container>
        );
    }
}

export default EventForm;

到目前为止，我只能弄清楚如何将用户输入数据存储在状态中，这就是我现在将虚拟数据存储在表中的原因。但是如何将这个 EventForm.js 存储在一个名为 EventList.js 的表中？

Answer 1

1. 创建一个新的arrayState，它是一个对象数组。
2. 当您收到其他状态 {title, eventType, time} 的输入时，使用新创建的 arrayState 的 setArrayState 将输入添加到您的数组状态中。 （注意：您必须使用扩展运算符来确保不会清除存储在数组状态中的先前对象。）
3. 然后将该数组状态传递给您使用 props 或上下文 API 在其中创建表的组件。
4. 在表格组件中，使用 JavaScript 的 Array.map() 函数将数据映射到表格和相应的表格字段中。这将根据数组的长度和每个数组对象中存储的数据有条件地呈现您的表格。

本视频演示了如何在 React 中渲染数组 -> https://www.youtube.com/watch?v=ke1pkMV44iU

您可以使用视频中的相同原理将数组渲染到您的表格中。