كيف أجعل الدالة map تعمل بعد الضغط على زر معين (ReactJS)

حسب ما فهمت إليك مثالاً لتنفيذ ما طلبت باستخدام React:

• إدارة حالة الرموز في مصفوفة باستخدام useState
• إضافة الرمز الحالي إلى المصفوفة عند الضغط على الزر
• عرض الرموز في قائمة وتمرير دالة لتعيين القيمة عند النقر
• تعيين قيمة الإدخال عند النقر على أحد الرموز في القائمة

import React, { useState } from 'react';

function App() {

  const [codes, setCodes] = useState([]);

  const [inputValue, setInputValue] = useState('');

  const handleClick = (code) => {
    setInputValue(code);
  }

  const addCode = () => {
    // أضف الرمز الحالي إلى المصفوفة
    setCodes(prevCodes => [...prevCodes, inputValue]); 
  }

  return (
    <div>
      <input 
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}  
      />
      <button onClick={addCode}>إضافة</button>
      
      {codes.map(code => (
        <li onClick={() => handleClick(code)}>{code}</li>  
      ))}

      <input value={inputValue} />

    </div>
  );
}

export default App;

تستطيع استخدام دالة map لإنشاء مصفوفة جديدة من الرموز المحفوظة، وبعد ذلك استخدام تلك  المصفوفة لإنشاء قائمة من عناصر <li> وجعل عناصر <li> قابلة للنقر عن طريق إضافة سمة onClick إليها، ثم استخدام وظيفة onClick لإدخال الرمز تلقائيًا في حقل إدخال <input>.

وإليك مثال:

const codes = [
  "1234567890",
  "abcdeghijklmnopqrstuvwxyz",
  "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
];

const codeList = codes.map((code) => (
  <li key={code} onClick={() => {
    // إدخال الرمز تلقائيًا في حقل الإدخال
    input.value = code;
  }}>
    {code}
  </li>
));

return (
  <div>
    <ul>{codeList}</ul>
    <input id="input" />
  </div>
);

وسيعرض الكود قائمة من عناصر <li>. يمكن النقر على كل عنصر <li> لإدخال الرمز تلقائيًا في حقل الإدخال <input>.

وإليك مثال كامل آخر مع استخدام حالة State للمكون:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([]); // حالة لتخزين العناصر المحفوظة
  const [selectedItem, setSelectedItem] = useState(''); // حالة لتخزين العنصر المحدد

  const handleAddItem = () => {
    if (selectedItem) {
      setItems([...items, selectedItem]);
      setSelectedItem('');
    }
  };

  const handleItemClick = (item) => {
    setSelectedItem(item);
  };

  return (
    <div>
      <div>
        <input
          type="text"
          value={selectedItem}
          onChange={(e) => setSelectedItem(e.target.value)}
        />
        <button onClick={handleAddItem}>إضافة</button>
      </div>
      <ul>
        {items.map((item, index) => (
          <li key={index} onClick={() => handleItemClick(item)}>
            {item}
          </li>
        ))}
      </ul>
      <input type="text" value={selectedItem} onChange={(e) => setSelectedItem(e.target.value)} />
    </div>
  );
}

export default App;

شكرا لكم

بتاريخ 5 ساعة قال عبدالباسط ابراهيم:

حسب ما فهمت إليك مثالاً لتنفيذ ما طلبت باستخدام React:

• إدارة حالة الرموز في مصفوفة باستخدام useState
• إضافة الرمز الحالي إلى المصفوفة عند الضغط على الزر
• عرض الرموز في قائمة وتمرير دالة لتعيين القيمة عند النقر
• تعيين قيمة الإدخال عند النقر على أحد الرموز في القائمة

import React, { useState } from 'react';

function App() {

  const [codes, setCodes] = useState([]);

  const [inputValue, setInputValue] = useState('');

  const handleClick = (code) => {
    setInputValue(code);
  }

  const addCode = () => {
    // أضف الرمز الحالي إلى المصفوفة
    setCodes(prevCodes => [...prevCodes, inputValue]); 
  }

  return (
    <div>
      <input 
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}  
      />
      <button onClick={addCode}>إضافة</button>
      
      {codes.map(code => (
        <li onClick={() => handleClick(code)}>{code}</li>  
      ))}

      <input value={inputValue} />

    </div>
  );
}

export default App;

 

أخي الكود الذي أريد إضافته ليس موجود في input بل في span وهو موجود في component آخر في نفس مجلد الـ component المطلوب

أي أنني أريد إضافة كود موجود في كومبونينت إلى قائمة موجودة في كومبونينت آخر أو حتى في الكومبونينت الأب