اذهب إلى المحتوى
  • 0

تغيير قيمة حقل باستعمال redux

محمود_سعداوي

السؤال

السلام عليكم

في المثال التالي عندما أريد تغيير قيمة حقل معين، فقط تتغير قيمة آخر حقل

Capture1.JPG.4c595d9bc43edfff2517797c99db94cc.JPG

مثلا لو تغيير العنصر الاول

يرجع الأول كما هو و يتغير الحقل الثاني إلى القيمة التي وضعتها.

لم أعرف أين يكمن المشكل.

الشيفرة البرمجية:

import { createSlice } from "@reduxjs/toolkit";

export const postsSlice = createSlice ({
    name : 'posts',
    initialState : {
        postsArray : [],
    },
    reducers : {
        addPosts : function (state,action) {
            state.postsArray.push(action.payload)
        },
        deletePost : function (state,action) {
            state.postsArray = state.postsArray.filter(post => post.id !== action.payload)
        },
        updatePost : function(state,action) {
            // console.log(state.postsArray)
            state.postsArray.map(p => {
                if (p.id === action.payload.id) {
                    p.title = action.payload.title
                    p.description = action.payload.description
                }
            })
        }
    },
})

export const { addPosts,deletePost,updatePost } = postsSlice.actions;

export default postsSlice.reducer;

 

function Edit({setIsEdit,title,description,post}) {
    
    const dispatch = useDispatch()
    const posts = useSelector((state) => state.posts.postsArray)

    const [updateTitle,setUpdateTitle] = useState(title)
    const [updateDescription,setUpdateDescription] = useState(description)


    const handleUpdate = () =>{
        dispatch(updatePost({id: post.id, title: updateTitle, description: updateDescription}))
        // console.log(posts)
        setIsEdit(false)
    }
  return (
    <div className='edit-post'>
      <Container className='form'>
        <InputGroup className="mb-3">
        <Form.Control
            style = {{ 
                backgroundColor: 'transparent',
                color: '#fff', 
                fontSize: '22px' 
            }}
            // value={updateTitle}
            onChange = {(e)=>setUpdateTitle(e.target.value)}
        />
        </InputGroup>

        <InputGroup className="mb-3">
        <Form.Control
            as="textarea"
            // value={updateDescription}
            style = {{ 
                        height: '100px', 
                        backgroundColor: 'transparent',
                        color: '#fff', 
                        fontSize: '22px' 
                    }}
            onChange = {(e)=>setUpdateDescription(e.target.value)}
        />
        </InputGroup>

        <Button 
            size="lg"
            onClick={handleUpdate}
        >
            Update
        </Button>

        </Container>
    </div>
  )
}

export default Edit

شكرا على المساعدة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0
بتاريخ 15 دقائق مضت قال محمود سعداوي:

شكرا و لكن عندما قمت بحذف الشرط لم يتغير شيء في الfunctionality

تفضل ملف الsrc

src.zip 4.04 kB · 0 تنزيلات

المشكلة هي انك تظهر كل لوحات التعديل الخاصة بكل المنشورات دفعة واحدة وذلك لأنك وضعت الشرط 

{
  isEdit 
    && 
    <Edit 
        setIsEdit={setIsEdit}
        title={title}
        description={description}
        post={post}
  />
}

داخل ال map التي تطبع كل المنشورات ولذلك فعندما يتحقق الشرط السابق ستظهر كل المكونات الـ Edit الخاصة بكل المنشورات.

ولحل المشكلة يجب اخراج المكونة الخاصة بالتعديل Edit إلى خارج الـ map بحيث يكون هنالك Edit واحدة ولكن نمرر لها عنصر مختلف في كل مرة، وهذا سيتطلب إنشاء state جديدة لتحتوي هذا العنصر.

ليصبح الكود كالتالي :

import React, { useState } from 'react'
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';
import { useDispatch, useSelector } from 'react-redux';
import { addPosts, deletePost } from '../redux/postsSlice';
import Edit from './Edit';

function Posts() {

	const [title, setTitle] = useState("")
	const [description, setDescription] = useState("")
	const [selectedPost, setSelectedPost] = useState("") // نضيف الوظيفة التالية ************

	const dispatch = useDispatch()
	const posts = useSelector((state) => state.posts.postsArray)

	const handleClick = () => {
		dispatch(addPosts({
			id: posts.length + 1,
			title,
			description,
		}))
		setTitle("")
		setDescription("")
	}

	// delete a post
	const handleDelete = (item) => {
		dispatch(deletePost(item))
	}

	// Edit a Post
	const [isEdit, setIsEdit] = useState(false)
	// نعدل الوظيفة التالية ****************************************
	const handleEdit = (post) => { // اضفنا الباراميتر  ************************************
		setIsEdit(true)
		setSelectedPost(post) // الكود المضاف ************************************
	}

	return (
		<div className='posts'>
			<Container className='form'>
				<InputGroup className="mb-3">
					<Form.Control
						style={{ color: '#000' }}
						placeholder='Post Title'
						value={title}
						onChange={(e) => setTitle(e.target.value)}
					/>
				</InputGroup>

				<InputGroup className="mb-3">
					<Form.Control
						as="textarea"
						placeholder="Post Description"
						style={{ height: '100px', color: '#000' }}
						value={description}
						onChange={(e) => setDescription(e.target.value)}
					/>
				</InputGroup>

				<Button
					variant="primary"
					size="lg"
					onClick={handleClick}
				>
					Add Post
				</Button>

			</Container>

			<div className='posts'>
				{
					posts.length > 0 ? posts.map((post, index) =>
						<div className='post-container' key={index} >
							<div className='post-title'>
								<h3>{post.title}</h3>
							</div>
							<div className='post-description'>
								<h5>{post.description}</h5>
							</div>

							<div className='btns'>
								<Button
									variant="outline-info"
									onClick={() => handleEdit(post)}
								>
									Edit
								</Button>

								<Button
									variant="outline-info"
									onClick={() => handleDelete(post.id)}
								>
									Delete
								</Button>
							</div>


						</div>
					)
						:
						(<h1 className='no-posts'>No Posts</h1>)
				}
				{/* map نخرج المكون الخاص بالتعديل إلى خارج الـ *************************************/}
				{
					isEdit
					&&
					<Edit
						setIsEdit={setIsEdit}
						title={selectedPost.title} // الكود المعدل ************************************
						description={selectedPost.description}// الكود المعدل ************************************
						post={selectedPost}// الكود المعدل ************************************
					/>
				}
			</div>

		</div>
	)
}

export default Posts

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

ربما تكون المشكلة في الوظيفة الخاصة بإضافة المنشورات،

وذلك لأنك وضعت الشرط 

if (p.id === action.payload.id)

والذي سيغير معلومات كل منشور يملك نفس الـ id.

فربما تكون المشكلة أنك قمت بحفظ المنشورات باستخدام نفس الـ id.

في حال لم يكن كذلك قم بمشاركة الكود الخاص بوظيفة إضافة المنشورات.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 7 دقائق مضت قال عمر قره محمد:

ربما تكون المشكلة في الوظيفة الخاصة بإضافة المنشورات،

وذلك لأنك وضعت الشرط 

if (p.id === action.payload.id)

والذي سيغير معلومات كل منشور يملك نفس الـ id.

فربما تكون المشكلة أنك قمت بحفظ المنشورات باستخدام نفس الـ id.

في حال لم يكن كذلك قم بمشاركة الكود الخاص بوظيفة إضافة المنشورات.

شكرا و لكن عندما قمت بحذف الشرط لم يتغير شيء في الfunctionality

تفضل ملف الsrc

src.zip

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...