当我们使用 React 从列表中单击第一个项目时打开模式

Question

我的值列表很少，我正在遍历地图以显示数据，现在我正在获取数据列表，但在这里我需要在单击列表的第一项时打开模式。所以我在这里遍历 Map 以显示数据，现在我如何为列表的第一项编写点击事件，任何人都可以帮助我，在此先感谢

const DisplayData:React.FC = () => {
    const data = inputs;
   
     const handlechange =(index:any) =>{
           const newData = {...data};
           //console.log(newData.purpose);
           newData.purpose[index].value = 'Credit Card Payment'

     }

  return (
    <div className='Data' >
        {data.purpose.map((items,index) =>{
           // console.log(items.value);
            return (<ul>
                <li key={index} onClick={() =>{handlechange(index)}} >{items.value}</li>
            </ul>
        )})}
    </div>
  )
}
export default DisplayData;

export const inputs = {
    "purpose": [
         {
            "locale": "EN",
             "code": "CRP",
             "value": "Credit Card Payment"
         },
         {
            "locale": "EN",
             "code": "SRP",
             "value": "Educational Support"
         },
         {
            "locale": "EN",
             "code": "KRP",
             "value": "Family Support (Workers uninons)"
         },
         {
            "locale": "EN",
             "code": "YRP",
             "value": "Credit Card Payment,Family Support (Workers uninons)"
         },
         {
            "locale": "EN",
             "code": "CRP",
             "value": "Family Support (Workers uninons),Credit Card Payment"
         },
         {
            "locale": "EN",
             "code": "CRP",
             "value": "Credit Card Payment1234567890asdfghjkl"
         },
         {
            "locale": "EN",
             "code": "CRP",
             "value": "Family Support (Workers uninons)1234567890sdfghjkl"
         },
         {
            "locale": "EN",
             "code": "CRP",
             "value": "Educational Supportertyh456789sdfg"
         },
    ]
}

Answer 1

您需要一个模态组件来显示 selected 数据。如果 select 选项仅在第一项上，您可以根据索引添加条件

     const DisplayData: React.FC = () => {
    const [selectedItem, setSelectedItem] = React.useState();

    const [openModal, setModalOpen] = useState(false);

    const data = inputs;

    const handleSelect = (selectedItem) => {
        setSelectedItem(item);
        setModalOpen(true);
    };
    const handleOnCloseModal = () => {
        setModalOpen(false);
        setSelectedItem(undefined);
    };

    return (
        <>
            <div className="Data">
                <ul>
                    {data.purpose?.map((item, index) =>
                        index === 0 ? (
                            <li key={index} onClick={() => handleSelect(item)}>
                                {item?.value}
                            </li>
                        ) : (
                            <li key={index}>{item?.value}</li>
                        )
                    )}
                </ul>
            </div>
            {/* modal component */}
            <Modal isOpen={openModal} onClose={handleOnCloseModal}>
                <div>{selectedItem?.value}</div>
            </Modal>
        </>
    );
};
export default DisplayData;

export const inputs = {
    purpose: [
        {
            locale: 'EN',
            code: 'CRP',
            value: 'Credit Card Payment',
        },
        {
            locale: 'EN',
            code: 'SRP',
            value: 'Educational Support',
        },
        {
            locale: 'EN',
            code: 'KRP',
            value: 'Family Support (Workers uninons)',
        },
        {
            locale: 'EN',
            code: 'YRP',
            value: 'Credit Card Payment,Family Support (Workers uninons)',
        },
        {
            locale: 'EN',
            code: 'CRP',
            value: 'Family Support (Workers uninons),Credit Card Payment',
        },
        {
            locale: 'EN',
            code: 'CRP',
            value: 'Credit Card Payment1234567890asdfghjkl',
        },
        {
            locale: 'EN',
            code: 'CRP',
            value: 'Family Support (Workers uninons)1234567890sdfghjkl',
        },
        {
            locale: 'EN',
            code: 'CRP',
            value: 'Educational Supportertyh456789sdfg',
        },
    ],
};

当我们使用 React 从列表中单击第一个项目时打开模式

Open the Modal when we click on First Item from the list using React

reactjs

react-hooks