React-ի ժառանգ կոմպոնենտների ստեյթների միջոցով աշխատանքի ռեժիմներ

Ենթադրենք, մեր արտադրանքների զանգվածը այժմ ունի հետևյալ տեսքը՝

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'},
];

Եկեք արտադրանքները ցուցադրենք HTML աղյուսակի տեսքով: Ընդ որում, եկեք այնպես անենք, որ աղյուսակի ցանկացած բջիջի վրա կտտացնելիս այդ բջիջում հայտնվի ինպուտ խմբագրման համար: Խնդիրը լուծելու համար կստեղծենք 3 կոմպոնենտ:

Products կոմպոնենտը կպահի ստեյթը արտադրանքների հետ և կօգտագործի Product կոմպոնենտները արտադրանքները ցուցադրելու համար: Product կոմպոնենտը իր հերթին նաև կօգտագործի ProductField կոմպոնենտները արտադրանքի կոնկրետ դաշտը ցուցադրելու համար (անվանում, գին, կատեգորիա):

ProductField կոմպոնենտը կցուցադրի կամ դաշտի տեքստը, կամ էլ դրա խմբագրման համար նախատեսված ինպուտը: Ընդ որում, թող խմբագրման ռեժիմը կամ ցուցադրման ռեժիմը կարգավորվի այս կոմպոնենտի սեփական ստեյթով:

Այսինքն՝ մենք ռեժիմը չենք պահելու ծնողական ստեյթում: Այնտեղ դա շատ անհարմար կլիներ, քանի որ մեզ պետք կլիներ նշել ռեժիմը արտադրանքի յուրաքանչյուր դաշտի համար, ինչը մեր ստեյթը կվերածեր մոտավորապես հետևյալի՝

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},
  ],
]

Սակայն մենք այդպիսի ստեյթ չենք պատրաստի, այլ կթողնենք այն, որը եղել է: Պարզապես ProductField կոմպոնենտի յուրաքանչյուր օրինակ իր ստեյթի միջոցով կկարգավորի ռեժիմը՝ խմբագրում կամ ցուցադրում:

Այսպիսով կստացվի, որ ծնողական կոմպոնենտը կպահի տվյալների ստեյթը, իսկ մեր թոռան տեղի կոմպոնենտը կստանա այդ տվյալները պրոպսերի միջոցով և ընդ որում կունենա սեփական ստեյթ՝ իր ռեժիմը փոխելու համար:

Այսպիսով, եկեք իրականացնենք նկարագրվածը:

Products կոմպոնենտը

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 կոմպոնենտը

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 կոմպոնենտը

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>;
}

Գործնական առաջադրանքներ