Működési módok az utód komponensek állapotain keresztül a Reactban

Tegyük fel, hogy a termékeink tömbje most így néz ki:

jsxconst initProds = [
  {id: id(), name: 'prod1', cost: 'cost1', catg: 'catg1'},
  {id: id(), name: 'prod2', cost: 'cost2', catg: 'catg2'},
  {id: id(), name: 'prod3', cost: 'cost3', catg: 'catg3'},
];

Jelenítsük meg ezeket a termékeket HTML táblázat formájában. Ugyanakkor tegyük úgy, hogy a táblázat bármely cellájára kattintva egy szerkesztésre szolgáló input jelenjen meg abban a cellában. A feladat megoldásához készítünk 3 komponenst.

A Products komponens tárolja a termékek állapotát és a Product komponenseket használja a termékek megjelenítésére. A Product komponens viszont szintén ProductField komponenseket fog használni a termék egy adott mezőjének (név, ár, kategória) megjelenítésére.

A ProductField komponens vagy a mező szövegét jeleníti meg, vagy egy inputot annak szerkesztéséhez. Ugyanakkor a szerkesztési vagy megjelenítési módot ennek a komponensnek az állapota szabályozza.

Vagyis nem fogjuk a módot a szülő állapotában tárolni. Az nagyon kényelmetlen lenne, mivel minden egyes termékmezőhöz meg kellene adnunk a módot, ami az állapotunkat valami ilyessé változtatná:

jsxconst initProds = [
  [
    {field: 'name', value: 'prod1', isEdit: false},
    {field: 'cost', value: 'cost1', isEdit: false},
    {field: 'catg', value: 'catg1', isEdit: false},
  ],
  [
    {field: 'name', value: 'prod2', isEdit: false},
    {field: 'cost', value: 'cost2', isEdit: false},
    {field: 'catg', value: 'catg2', isEdit: false},
  ],
  [
    {field: 'name', value: 'prod3', isEdit: false},
    {field: 'cost', value: 'cost3', isEdit: false},
    {field: 'catg', value: 'catg3', isEdit: false},
  ],
]

Mi azonban nem fogunk ilyen állapotot készíteni, hanem meghagyjuk azt, ami volt. Egyszerűen minden egyes ProductField komponens példány a saját állapotával fogja szabályozni a módot: vagy szerkesztés, vagy megjelenítés.

Így az lesz, hogy a szülő komponens tárolja az adatokkal rendelkező állapotot, az unoka komponensünk pedig megkapja ezeket az adatokat a prop-okon keresztül, és ugyanakkor rendelkezni fog saját állapottal a saját módja megváltoztatásához.

Nos, valósítsuk meg a leírtakat.

Products komponens

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  function changeField(id, field, event) {
    setProds(prods.map(prod => {
      if (prod.id === id) {
        prod[field] = event.target.value;
      }
      
      return prod;
    }));
  }
  
  const rows = prods.map(prod => {
    return <Product
      key ={prod.id}
      id  ={prod.id}
      name={prod.name}
      cost={prod.cost}
      catg={prod.catg}
      changeField={changeField}
    />;
  });
  
  return <div>
    <table>
      <tbody>
        {rows}
      </tbody>
    </table>
  </div>;
}

Product komponens

jsxfunction Product({ id, name, cost, catg, changeField }) {
  return <tr>
    <ProductField id={id} text={name} type="name" changeField={changeField} />
    <ProductField id={id} text={cost} type="cost" changeField={changeField} />
    <ProductField id={id} text={catg} type="catg" changeField={changeField} />
  </tr>;
}

ProductField komponens

jsxfunction ProductField({ id, text, type, changeField }) {
  const [isEdit, setIsEdit] = useState(false);
  
  return <td>
    {
      isEdit
      ? <input
        value={text}
        onChange={event => changeField(id, type, event)}
        onBlur={() => setIsEdit(false)}
      />
      : <span onClick={() => setIsEdit(true)}>{text}</span>
    }
  </td>;
}

Gyakorlati feladatok