Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 如何将React模态与map函数一起使用?_Reactjs_Dictionary_Modal Dialog_React Modal - Fatal编程技术网

Reactjs 如何将React模态与map函数一起使用?

Reactjs 如何将React模态与map函数一起使用?,reactjs,dictionary,modal-dialog,react-modal,Reactjs,Dictionary,Modal Dialog,React Modal,我正在通过数据映射,我想点击一个图像,并有一个带有data.title和data.info的模式弹出窗口。每个模式仅显示数组中的最后一个数据。我读到所有的模态都出现在一起,我只看到最后一个,但我不太明白如何解决这个问题,特别是在React中的函数组件。短暂性脑缺血发作 export default function SomeComponent const [modalIsOpen, setModalIsOpen] = useState(false); const customS

我正在通过数据映射,我想点击一个图像,并有一个带有data.title和data.info的模式弹出窗口。每个模式仅显示数组中的最后一个数据。我读到所有的模态都出现在一起,我只看到最后一个,但我不太明白如何解决这个问题,特别是在React中的函数组件。短暂性脑缺血发作


 export default function SomeComponent   
 const [modalIsOpen, setModalIsOpen] = 
 useState(false);
 const customStyles = {
  content: {
    top: '35%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    width: '60%',
    transform: 'translate(-40%, -10%)',
  },
}
  return (
    <div className="container">


    { somedata.map((data) => 
    (<div className='item' key={data.id} >
    <img src={data.img} alt='' onClick={()=> setModalIsOpen(true)} />
    <Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false)} style={customStyles}>
      <h1>{data.title</h1>
      <p>{data.content</p> 
    <div>
    <button onClick={() => setModalIsOpen(false)}>X</button>
    </div>
    </Modal>
   </div>))}
 </div>
</div>
  );}

导出默认函数组件
常量[modalIsOpen,setModalIsOpen]=
useState(假);
常量自定义样式={
内容:{
前三名:“35%”,
左:50%,
右图:“自动”,
底部:“自动”,
利润率:'-50%',
宽度:“60%”,
转换:“转换(-40%,-10%),
},
}
返回(
{somedata.map((数据)=>
(
setModalIsOpen(真)}/>
setModalIsOpen(false)}style={customStyles}>
{data.title
{data.content

setModalIsOpen(false)}>X ))} );}
您应该只使用
模态组件的一个实例,并使用状态将单击图像的数据传递给它。每次单击图像时,应使用单击图像的数据更新modal的数据。请参见下面的示例。我已经修改了你的代码使它工作

 export default function SomeComponent() {  
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [modalData, setModalData] = useState(null);
   const customStyles = {
    content: {
      top: '35%',
      left: '50%',
      right: 'auto',
      bottom: 'auto',
      marginRight: '-50%',
      width: '60%',
      transform: 'translate(-40%, -10%)',
    },
  }
  return (
    <>
      <div className="container">
        {somedata.map(data => (
          <div className='item' key={data.id} >
            <img 
              src={data.img} 
              alt='' 
              onClick={()=> {
                setModalData(data);
                setModalIsOpen(true);
              }
            />
          </div>
        ))}
      </div>
      <Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false)} style={customStyles}>
        <h1>{modalData.title}</h1>
        <p>{modalData.content}</p> 
        <div>
         <button onClick={() => setModalIsOpen(false)}>X</button>
        </div>
      </Modal>
    </>
  )
}
导出默认函数SomeComponent(){
const[modalIsOpen,setModalIsOpen]=使用状态(false);
const[modalData,setModalData]=useState(null);
常量自定义样式={
内容:{
前三名:“35%”,
左:50%,
右图:“自动”,
底部:“自动”,
利润率:'-50%',
宽度:“60%”,
转换:“转换(-40%,-10%),
},
}
返回(
{somedata.map(数据=>(
{
setModalData(数据);
setModalIsOpen(真);
}
/>
))}
setModalIsOpen(false)}style={customStyles}>
{modalData.title}
{modalData.content}

setModalIsOpen(false)}>X ) }
成功了,你太棒了,非常感谢!不客气。尽管我非常感谢你的评论,但如果你喜欢这个解决方案,它也会被认为是最好的答案。我试过了,但我没有任何值得称赞的地方。不用担心,谢谢。