تغير قيمه state من component اخر في React.js

يمكنك تنفيذ المطلوب عبر تمرير الدالة المسؤلة عن تغيير الحالة من المُكون الأب إلى المُكون الإبن, يمكنك فهم ذلك بشكلٍ أفضل عبر المثال التالي

const Parent = ()=>{
	const [name, setName] = useState("")
    
    const changeName = (value)=>{
    	setName(value)
    }
    return(
    	<Child changeName = {changeName}/>
    )
}

const Child = ({changeName})=>{

return(
	<input type='text' onChange={e=>changeName(e.target.value)}/>
)

}

كما تلاحظ عند تغيير قيمة الinput في المكون الإبن يتم مناداة الدالة changeName التي بدورها تقوم بتغيير الstate الخاص بالمكون الأب

إذا كنت تستخدم مكون صف Class Component يمكنك استدعاء التابع setState من صنف المكون وتمرير غرض يحوي القيم التي تريد تغييرها كالتالي 

class MyComponent extends Component {

  ...
  
  function render() {
   ...

    this.setState({ state: 'القيمة الجديدة' });

   ...
  }
}

بينما إذا كنت تستخدم مكون تابع Functional Component يمكنك استخدام الخطاف useState سيعيد لك مصفوفة العنصر الأول منها هو الحالة والثاني هو تابع لتغيير الحالة يمكن تمرير القيمة له مباشرة كالتالي

function MyComponent() {
 const [state, setState] = useState();
  
  ...
  
  setState('القيمة الجديدة');
  
  ...
}

يمكنك مراجعة المقال التالي لقراءة المزيد

  بتاريخ On 21‏/12‏/2021 at 21:45 قال Hassan Hedr:

إذا كنت تستخدم مكون صف Class Component يمكنك استدعاء التابع setState من صنف المكون وتمرير غرض يحوي القيم التي تريد تغييرها كالتالي 

class MyComponent extends Component {

  ...
  
  function render() {
   ...

    this.setState({ state: 'القيمة الجديدة' });

   ...
  }
}

بينما إذا كنت تستخدم مكون تابع Functional Component يمكنك استخدام الخطاف useState سيعيد لك مصفوفة العنصر الأول منها هو الحالة والثاني هو تابع لتغيير الحالة يمكن تمرير القيمة له مباشرة كالتالي

function MyComponent() {
 const [state, setState] = useState();
  
  ...
  
  setState('القيمة الجديدة');
  
  ...
}

يمكنك مراجعة المقال التالي لقراءة المزيد

 

أظهر المزيد  

مش ده قصدي 

ازاي اعدل علي ال state من ملف تاني مش منفس الملف

  بتاريخ On 21‏/12‏/2021 at 21:49 قال Kerollos nagy:

مش ده قصدي 

ازاي اعدل علي ال state من ملف تاني مش منفس الملف

أظهر المزيد  

يجب إرفاق المثال الذي تعمل عليه كنص وتنسيقه كشيفرة مع توضيح استفسارك تمامًا على المثال الذي تواجه فيه المشكلة  

  بتاريخ On 21‏/12‏/2021 at 21:56 قال Hassan Hedr:

يجب إرفاق المثال الذي تعمل عليه كنص وتنسيقه كشيفرة مع توضيح استفسارك تمامًا على المثال الذي تواجه فيه المشكلة  

أظهر المزيد  

طب هل ممكن انادي علي state من ملف اخر

  بتاريخ On 21‏/12‏/2021 at 21:58 قال Kerollos nagy:

طب هل ممكن انادي علي state من ملف اخر

أظهر المزيد  

لا يمكن ذلك مباشرة حيث أن الحالة هي خاصة داخل المكون نفسه ولا يمكن لمكون الآخر محاولة التعديل فيها،

يمكن بدل من ذلك تمرير خصائص props للمكون كالتالي

<MyComponent propName='قيمة الخاصية'/>

ومن داخل المكون يمكن الوصول إليها إما عبر this.props في مكونات الصفوف:

class MyComponent extends Component {

  ...
  
  function render() {
   ...

    this.props.propName;

   ...
  }
}

أو من خلال أو معامل للمكونات التابع:

function MyComponent(props) {
  
  ...
  props.propName
  
  ...
}