העברת מידע מפקד לשאר הפקדים בריאקט הוקס

קורס React
#1

הי
מנסה להעביר מידע מקומפוננטה input לקומפוננטות input דומות בהתאם לתרגיל
ברגע שקומפוננטה נוצרה בדום היא כבר לא יכולה לעדכן אחרים אלא אם האבא שלה מעורב?
לכן ניסיתי לבנות פונקציה onChange וגם פונקצית test1 שימצאו בAPP שהוא האבא של הקומפוננטות ושהוא יופעל הוא יעביר לבנים את הPROP עם הדאטה המתאים
.— לא עובד

import React, { useState } from 'react';

export default function Multi(props) {

    const {data}=props;

    const [val, setVal] = useState();

    return (

        < >

        {val}

<p>{JSON.stringify(props)}</p>

            <p>

                <input type='text' placeholder={data} defaultValue={val} />

            </p>

        </>

    )

}


import React, { useState } from 'react';

import Multi from './multi';

const App = () => {

  const [val, setVal] = useState();

  const changeData = (e) => {

    let d = (e.target.value);

   setVal(d);

   alert(d)

  }

  const test1=(k)=> {

    alert('in test1');

    return (k);

  }

  return (

    <div >

      <Multi data="data1"  onChange={changeData}/>

      <Multi data="data2" val={1 + 1}  onChange={changeData}/>

      <Multi data="data3" val={val}  onChange={changeData}/>

      <Multi data="data4"  test1={() => test1(1)}  onChange={changeData}/>

    </div>

  )

}

export default App;
#2

שיפרתי את הקוד
העניין שזה עובד בהתחלה ולאחר שכל השדות “מולאו” זה מפסיק לעבוד
ניסיתי DEEP COPY אבל לא עזר, נראה שריאקט לא מזהה שינויים בתוכן ומפסיק לעדכן שדות:

import React, { useState } from 'react';

function Multi(props) {

  const { data } = props;

  const {func}= props;

  {console.log(JSON.stringify(props))}

  return (

    < >

      <p>

        <input type='text'  defaultValue={data} onChange={func} />

      </p>

    </>

  )

}

const App = () => {

  const [data, setData] = useState();

  const update = (value) => {

    setData(value);

  }

  return (

    <div >

      <Multi  func={(e) =>update(e.target.value)} data={data}/>

      <Multi  func={(e)=> update(e.target.value)} data={data}/>

      <Multi  func={(e)=> update(e.target.value)} data={data}/>

      <Multi  func={(e)=> update(e.target.value)} data={data}/>

    </div>

  )

}

export default App;
#3

כעת תקין(לא היה קל…)

import React, { useState } from 'react';

function Multi(props) {

  const { data,setData } = props;

  return (

      <p>

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

      </p>

  )

}

const App = () => {

  const [data, setData] = useState();

  return (

    <div >

      <Multi   data={data} setData={setData} />

      <Multi   data={data} setData={setData} />

      <Multi   data={data} setData={setData} />

      <Multi   data={data} setData={setData} />

    </div>

  )

}

export default App;
לייק 1
#4

גלעד - האחרון מעולה.

שים לב להבדל בין defaultValue ל value - ה defaultValue נותן לשדה ערך ראשוני אבל לא ממשיך לעדכן אותו אחרי שהמידע השתנה. לעומתו value נשאר כל הזמן מסונכרן על הערך במשתנה שנתת