文章/答案/技术大牛

发布

社区首页 >问答首页 >crud:如何更改名称和区域

问crud:如何更改名称和区域
EN

Stack Overflow用户

提问于 2021-06-24 02:19:54

回答 2查看 63关注 0票数 0

我正在使用React来创建一个完整的crud应用程序，但是我不知道如何使在房子中创建的房间的名称和面积发生变化。有没有人有任何建议或知道如何使这项工作？

对于人们所需要看到的代码也很抱歉。

App.js

import React, { Component } from 'react';
import { HousesList } from './Components/Houses-List'
// import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <HousesList/>
      </div>
    )
  }
}

export default App;

House.js

import React from 'react';
import { NewRoomForm } from './NewRoomForm';
import { EditRoomForm } from './EditRoomForm';

export const House = (props) => {
    const { house, updateHouse } = props;

    const deleteRoom = (roomId) => {
        const updatedHouse = {
            ...house,
            rooms: house.rooms.filter((x) => x._id !== roomId)
        };
        updateHouse(updatedHouse);
    }

    const addNewRoom = (room) => updateHouse({ ...house, rooms: [...house.rooms, room]});

    const rooms = () => (
        <ul>
            {house.rooms.map((room, index) => (
                <li key={index}>
                    <label> {`${room.name} Area: ${room.area}`} </label>
                    <button onClick={(e) => deleteRoom(room._id)}>Delete Room</button>
                    <EditRoomForm />
                    <h1> </h1>
                </li>
            ))}
        </ul>
    );

    return (
        <div>
            <h1>{house.name}</h1>
            {
                rooms({ rooms, houseId: house._id, deleteRoom})
            }
            <NewRoomForm addNewRoom={addNewRoom} />
            {/* <EditRoomForm addNewRoom={addNewRoom} /> */}
        </div>
    )
    
};

EditRoomForm.js

import React, { useState } from 'react';




export const EditRoomForm = (props) => {
    const [name, setName] = useState('');
    const [area, setArea] = useState('');

    const handleAreaInput = (e) => {
        const int = parseInt(e.target.value, 10);
        setArea(int >= 0 ? int : '');
    }

    const onSubmit = (e) => {

        e.preventDefault();
        if (name && area) {

            console.log("name: " + name)
            console.log("area: " + area)

            setName('');
            setArea('');

            console.log("name: " + name)
            console.log("area: " + area)
        } else {
            console.log('invalid input');
        }
    };
        
    return (
        
        <div>
            <form onSubmit={onSubmit}>
                <input 
                    type='text'
                    placeholder='name'
                    onChange={(e) => setName(e.target.value)}
                    value={name}
                />
                <input
                    type='text'
                    placeholder='area'
                    onChange={handleAreaInput}
                    value={area}
                />
                <button type='submit'>Edit Room</button>
            </form>
        </div>
    )
};

NewRoomForm.js

import React, { useState } from 'react';



export const NewRoomForm = (props) => {
    const [name, setName] = useState('');
    const [area, setArea] = useState('');

    const handleAreaInput = (e) => {
        const int = parseInt(e.target.value, 10);
        setArea(int >= 0 ? int : '');
    }

    const onSubmit = (e) => {
        e.preventDefault();
        if (name && area) {
            props.addNewRoom({name, area});
            setName('');
            setArea('');
        } else {
            console.log('invalid input');
        }
    };

    return (
        <div>
            <h4>Add a new room</h4>
            <form onSubmit={onSubmit}>
                <input 
                    type='text'
                    placeholder='name'
                    onChange={(e) => setName(e.target.value)}
                    value={name}
                />
                <input
                    type='text'
                    placeholder='area'
                    onChange={handleAreaInput}
                    value={area}
                />
                <button type='submit'>Add/Edit Room</button>
            </form>
        </div>
    )
};

Houses-List.js

import React from 'react';
import { House } from './House';
import { housesApi } from '../rest/HousesApi';
import { NewRoomForm } from './NewRoomForm';
// import { EditRoomForm } from './edit';

export class HousesList extends React.Component {
    state = {
        houses: []
    };

    componentDidMount() {
        console.log("Inside componentDidMount Funcaton Block")
        this.fetchHouses();
    }

    fetchHouses = async () => {
        console.log("Inside fetchHouses Funcaton Block")
        const houses = await housesApi.get();
        this.setState({ houses });
    }

    updateHouse = async (updatedHouse) => {
        console.log("Inside updateHouse Funcaton Block")
        console.log("housesApi Check: " + housesApi)
        await housesApi.put(updatedHouse);
        this.fetchHouses();
    };

    render() {
        console.log("Inside render of Houses-List")
        console.log(this.state.houses);
        return (
            <div className="house-list">
                
                {this.state.houses.map((house) => (
                    <House 
                        house={house}
                        key={house._id}
                        updateHouse={this.updateHouse}
                    />
                ))}
            <NewRoomForm /> 
            </div>
        )
    }
}

HousesApi.js

const HOUSES_ENDPOINT = "https://ancient-taiga-31359.herokuapp.com/api/houses";

class HousesApi {
    get = async () => {
        try {
            console.log("Inside Try Block Of HousesAPI get funcation")
            const resp = await fetch(HOUSES_ENDPOINT);
            const data = await resp.json();
            return data;
        } catch(e) {
            console.log("Oops, looks like fetchHouses has an issue", e)
        }
    }

    put = async (house) => {
        try {
            console.log("Inside Try Block Of put funcation")
            console.log(house)
            console.log("HOUSES_ENDPOINT: " + HOUSES_ENDPOINT + house._id)
            console.log("house._id: " + house._id)
            
            const resp = await fetch(`${HOUSES_ENDPOINT}/${house._id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(house)
            });

            console.log("The body is: " + JSON.stringify(house))
            // console.log(" resp.json(): " +  resp.json())
            console.log("At The End OF Try Block Of put funcation")
            return await resp.json();
        } catch(e) {
            console.log("Oops, looks like updating houses has an issue", e)
        }
    }
}


export const housesApi = new HousesApi();

javascript

reactjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-06-24 03:19:51

在帮助编写代码之前，我将根据您的代码结构解释更新房间的概念。

useEffect.

User需要用选定的房间道具和带有索引参数的咖喱函数来呈现EditRoomForm。

EditRoomForm有自己的房间状态，当有一个传入的选定的房间道具时，它将通过更新名称和区域更新名称和区域，然后单击submit，这将触发一个回调函数道具，该支持将返回新的名称和区域，并使用house.rooms.

Parent House.js内的索引更新这些新的名称和区域，然后用更新的详细信息调用house API PUT方法。

通过上述步骤，您将需要像这样更新代码。

House.js

import React from 'react';
import { NewRoomForm } from './NewRoomForm';
import { EditRoomForm } from './EditRoomForm';

export const House = (props) => {
    const { house, updateHouse } = props;

    const deleteRoom = (roomId) => {
        const updatedHouse = {
            ...house,
            rooms: house.rooms.filter((x) => x._id !== roomId)
        };
        updateHouse(updatedHouse);
    }
     
    const updateRoom = (index) => (name,area) => {
        const updatingHouse = JSON.parse(JSON.stringify(house));
        updatingHouse.rooms[index] = {...updatingHouse.rooms[index], name,area}
        updateHouse(updatingHouse );
    }


    const addNewRoom = (room) => updateHouse({ ...house, rooms: [...house.rooms, room]});

    const rooms = () => (
        <ul>
            {house.rooms.map((room, index) => (
                <li key={index}>
                    <label> {`${room.name} Area: ${room.area}`} </label>
                    <button onClick={(e) => deleteRoom(room._id)}>Delete Room</button>
                    <EditRoomForm selectedRoom={room} onSubmit={updateRoom(index)} />
                    <h1> </h1>
                </li>
            ))}
        </ul>
    );

    return (
        <div>
            <h1>{house.name}</h1>
            {
                rooms({ rooms, houseId: house._id, deleteRoom})
            }
            <NewRoomForm addNewRoom={addNewRoom} />
        </div>
    )
    
};

EditRoomForm.js

import React, { useState,useEffect } from 'react';


export const EditRoomForm = (props) => {
    const [name, setName] = useState('');
    const [area, setArea] = useState('');
    const {selectedRoom} = props;

    useEffect(() => {
      setName(selectedRoom.name); 
      setArea(selectedRoom.area); 
    }, [selectedRoom] )

    const handleAreaInput = (e) => {
        const int = parseInt(e.target.value, 10);
        setArea(int >= 0 ? int : '');
    }

    const onSubmit = (e) => {

        e.preventDefault();
        if (name && area) {

            console.log("name: " + name)
            console.log("area: " + area)
            props.onSubmit(name,area);

            setName('');
            setArea('');

            console.log("name: " + name)
            console.log("area: " + area)
        } else {
            console.log('invalid input');
        }
    };
        
    return (
        
        <div>
            <form onSubmit={onSubmit}>
                <input 
                    type='text'
                    placeholder='name'
                    onChange={(e) => setName(e.target.value)}
                    value={name}
                />
                <input
                    type='text'
                    placeholder='area'
                    onChange={handleAreaInput}
                    value={area}
                />
                <button type='submit'>Edit Room</button>
            </form>
        </div>
    )
};

你明白了吧。

票数 1

Stack Overflow用户

发布于 2021-06-24 02:43:40

您可以添加一个按钮并使用useState钩子来保持状态。在按钮上单击“将editingRoom状态设置为真”。在状态改变时，将重新呈现组件，并显示EditForm组件。你需要通过合适的道具。编辑完成后，请将editingRoom状态重置为false。

import React, { useState } from 'react';

const [editingRoom, setEditingRoom] = useState(false);

const handleEditRoom = (room) => {
   .......
   setEditingRoom(false);
}

const rooms = () => (
        <ul>
            {house.rooms.map((room, index) => (
                <li key={index}>
                    <label> {`${room.name} Area: ${room.area}`} </label>
                    <button onClick={(e) => deleteRoom(room._id)}>Delete Room</button>
{!editingRoom && <button onClick={(e) => seEditingRoom(true)}>Edit Room</button>}
                    {editingRoom && <EditRoomForm handleEditRoom={handleEditRoom} />}
                    <h1> </h1>
                </li>
            ))}
        </ul>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68108890

复制

相似问题

问crud:如何更改名称和区域
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问crud:如何更改名称和区域EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问crud:如何更改名称和区域
EN