Javascript 如何在react中从表单组件将数据呈现到表中？
我对react非常陌生，在建立一个基本的日程安排网站时，我试图学习react的概念。 在这里，我从输入字段获取数据并以状态存储，但如何将表单数据呈现给表组件？ 下面我分享代码和文件结构 事件组件又称主要组件Javascript 如何在react中从表单组件将数据呈现到表中？,javascript,reactjs,react-redux,react-router,Javascript,Reactjs,React Redux,React Router,我对react非常陌生，在建立一个基本的日程安排网站时，我试图学习react的概念。 在这里，我从输入字段获取数据并以状态存储，但如何将表单数据呈现给表组件？ 下面我分享代码和文件结构 事件组件又称主要组件 import React from "react"; import {Container, Row, Table} from "react-bootstrap"; import EventModal from "./EventModalBut
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;
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;
从“React”导入React；
从“react bootstrap”导入{容器、行、表}；
从“/EventModalButton”导入EventModal；
类EventList扩展了React.Component{
render（）{
返回(
标题
类型
时间
日期
Python研讨会
车间
下午12:00
2020年8月29日，星期六
大流行情况
网络研讨会
下午2:00
2020年8月29日，星期六
//打开模式窗体以添加新数据
);
}
}
导出默认事件列表；
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;
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，{useState}来自“React”；
从“react bootstrap”导入{按钮，模式}；
从“/EventForm”导入EventForm；
函数EventModal（）{
const[show，setShow]=useState（false）；
const handleClose=（）=>setShow（false）；
常量handleShow=（）=>setShow（true）；
返回(
添加新事件
新事件
接近
);
}
导出默认事件模式；
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;
从“React”导入React；
从“react bootstrap”导入{按钮、容器、表单}；
从“/CustomDatePicker”导入CustomDatePicker；
常数时隙=[
{
id:1，
值：“上午11:30”
},
{
id:2，
值：“12:00PM”
},
{
id:3，
值：“下午12:30”
},
{
id:4，
值：“01:00PM”
},
{
id:5，
值：“01:30PM”
},
{
id:6，
值：“02:00PM”
},
{
id:7，
值：“下午2:30”
},
{
id:8，
值：“03:00PM”
},
];
常量事件类型=[
{
id:1，
价值：“网络研讨会”，
},
{
id:2，
价值:"工作坊",，
},
{
id:3，
值：“Confernece”，
},
];
//时隙
函数选项（{Options}）{
返回(
options.map（选项=>
{option.value}
)
);
}
//对于事件类型
函数选项（{options}）{
返回(
options.map（选项=>
{option.value}
)
);
}
类EventForm扩展了React.Component{
构造函数（）{
超级（）；
此.state={
标题：“”，
eventtype:null，
时间：空，
}
}
handleTitleChange=（事件）=>{
这是我的国家({
标题：event.target.value
})
};
handleTypeChange=（事件）=>{
这是我的国家({
eventtype:event.target.value
})
};
handleTimeChange=（事件）=>{
这是我的国家({
时间：event.target.value
})
};
handleSubmit=（）=>{
警报（`this.state.title}${this.state.eventtype}，${this.state.time}`）
};
render（）{
返回(
标题
事件类型
时隙
日期
提交
);
}
}
导出默认事件形式；