在 React js 视频模式中出现问题

Posted 2023-05-08

【中文标题】在 React js 视频模式中出现问题

【英文标题】：Having Issue in React js video modal

【发布时间】：2021-11-13 22:52:47

【问题描述】：

单击视频链接时，我正在尝试制作可播放视频的模型，但不知道该怎么做。尽力而为，但无法解决。我从互联网上选择了一个逻辑，但没有奏效。我还注释掉了modal部分。在此先感谢...

代码 ................................... .........................

import React,useState, useEffect  from "react";
import './App.css';
import Axios from "axios";
import ModalVideo from 'react-modal-video';///


function App() 

const [isOpen, setOpen] = useState(false)///
const [resdata, setresdata] = useState([])
const showurl = 'http://localhost/react%20project/newapp/src/show.php?function=show';

const updtcomp = () => 
  Axios.get(showurl) 
  .then(res =>
    setresdata(res.data)
    console.log(res)
  )
  
  .catch(err => 
      console.log(err)
    
)


  useEffect(() => 
      Axios.get(showurl) 
      .then(res =>
        setresdata(res.data)
        console.log(res)
      )
      
      .catch(err => 
          console.log(err)
        )
  , [])
  console.log(resdata)

return( 
<div className="App"><br/>
          
      <div className="tblfrm">      
        <table>
            <thead>
              <tr>
                <td>ID</td>
                <td>Name</td>
                <td>Date</td>
                <td>V-Links</td>
                <td>Action</td>
              </tr>
            </thead>
            <tbody>
               resdata.length > 0 && resdata.map( resdata => (
              <tr> 
              <td key=resdata.Id>resdata.Id</td>
                <td key=resdata.Name>resdata.Name</td>
                <td key=resdata.date>resdata.date</td>

    /* trying to make a video playable modal on click of the link  */
                
                <td key=resdata.video>
                <a onClick=()=> setOpen(true) href=resdata.video> 
                resdata.video </a>
                <ModalVideo isOpen=isOpen onClose=()=> setOpen(false)/>
                </td> 

                <td>
                <button>EDIT</button> &nbsp;
                <button>DELETE</button>
                </td>
                </tr>
              ) ) 
            </tbody>      
        </table>
      </div>      
</div>   
  )

export default App;

【参考方案1】：

我用按钮让它与众不同，因为它对我来说很复杂..

 <button onClick=()=>setModalIsOpen(true)> VIEW </button> &nbsp;
                <Modal isOpen=modalIsOpen> 
                <ReactPlayer controls  
                
                
                url=resdata.video
                 />
                </Modal>