Question

我是React的新手，我希望这里不是一个重复的问题，在某个地方，对不起，如果我的解释是错误的。因此，我得到了具有3个孩子的“ createEvent”面板。名称，开始日期（来自日历组件），结束日期（还）以及来自输入文本区域的详细信息。我创建了“ createEvent”面板作为父面板，其中包含来自子面板的每个数据的状态。在父组件内部，我想创建一个可以发送到后端的对象。我尝试从子级获取数据，并使用useState（）将值赋予对象属性。如果我尝试使用来自父级的输入来获取数据，则可以，但是不能从子级中获取输入，并且我不知道该怎么做。我将在这里留下一个孩子的示例，创建“事件”面板并发布请求。如果我弄清楚如何处理这些示例，那么我会知道的。

插入名称组件

import React, { useState } from 'react';
import './title.style.css';


export default function Title(props) {

    const [name, setName] = useState(props.name);

    function handlerName(e) {
        props.handlerName(e.target.value);
    }

    return(
        <div class="md-form active-cyan active-cyan-2 mb-3">
          <input 
            class="form-control" 
            type="text" 
            placeholder={name} 
            aria-label="Name"
            onChange={(e) => {handlerName(e)}}
            />
        </div>
    );
}

创建事件面板

import React, { useState, useEffect } from 'react';
import './createEvent.style.css';
import Name from '../input/title.component.js';
import Calendar from '../input/calendar.component.js';
import Details from '../input/details.component.js';
import CardService from '../../service/CardService.js';


export default function CreateEvent() {

    const [eventName, setEventName] = useState("");
    const [eventStartDate, setEventStartDate] = useState(new Date());
    const [eventEndDate, setEventEndDate] = useState(new Date());
    const [eventDetails, setEventDetails] = useState("");
    const [eventObject, setEventObject] = useState({
        "name": "",
        "startDate": new Date(),
        "endDate": new Date(),
        "details": ""   
    });

    async function handleName(name1){
        await setEventName(name1);
    }
    async function handleStartDate(date){
        await setEventObject({startDate: date});
    }
    async function handleEndDate(date){
        await setEventObject({endDate: date});
    }
    async function handleDetails(value){
        await setEventObject({details: value});
    }
    function handleSubmit(e) {
        CardService.postEvent(eventObject)
    }   
    return(
        <form onSubmit={(e) => handleSubmit(e)}>
            <div className="Create-event">
                <div>
                    <Name name={'Insert event name'}  handlerName={handleName} />
                </div>
                <div className="date">
                    <Calendar type="submit" handlerDate={handleStartDate} date={eventStartDate}/>
                </div>
                <div className="date">
                    <Calendar type="submit" handlerDate={handleEndDate} date={eventEndDate}/>
                </div>
                <div className="text">
                    <Details type="submit" handleDetails={handleDetails}/>
                </div>
                <button className="createButton" >
                    Create   
                </button>
            </div>
        </form>
    );
}

发布请求


const CardService = {

    postEvent(value1){
        fetch("http://localhost:8080/event/ReminderApp/api/v1/event/" ,
        {
            method: 'POST',
            headers: {
               "Content-Type" : "application/JSON" ,
            },
            dataType: "json",
            body: JSON.stringify(value1),
        })
        .then(response => response.json())
        .then(json => {console.log(json)
        })
        .catch(err => {
             console.log('Type send failed', err);
        });
    },

    getEvents() {
       return fetch('http://localhost:8080/event/ReminderApp/api/v1/event')
        .then((response) => response.json())
        .then((response) => {
            return response;
        });
    }, 
    
    deleteEvent(value) {
        fetch("http://localhost:8080/event/ReminderApp/api/v1/event/" + value,
        {
            method: 'DELETE',
        })
        .catch(err => {
             console.log('Type send failed', err);
        });
    },
};

export default CardService;

我尝试在handle函数中设置所有createEvent状态，并在使用useEffect设置了对象的所有字段之后，但该应用程序坏了。我尝试在handleSubmit函数中设置setEventObject（）并调用CardService.postEvent（），但它发送了默认对象。

我现在向您展示的是我的尝试的最后一个版本。

如何使用useState（反应挂钩）从子级设置的不同状态添加对象属性？

0 个答案: