Question

嗨，有没有一种方法可以向状态挂钩添加ID或其他任何键？我知道有一种方法可以将其添加到像这样的有状态类组件中。

 openModal (id) {
    this.setState({
       isOpen: {
          [id]: true
       }
    });
 }

我的问题是我有一个要映射的模态，我需要一次打开每个模态。现在它们都使用相同的状态并同时打开。我能想到的唯一方法是向状态以及onClick函数添加键。可以将我指向分别打开每个模式的方式的任何建议都值得欢迎。

这是我的代码

const Video = () => {
  const [modalIsOpen, setModalOpen] = useState(false)
  console.log(modalIsOpen)
  return (
    <Query query={twoVideos}>
    {({ loading, error, data }) => {
    if (loading) return <h2>Loading post...</h2>
    if (error) return <h1>Error fetching the post!</h1>
        return (
        <>
        {data.video.map(videos => {
            const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
            const match = videos.video.match(regExp);
            const res = (match&&match[7].length==11)? match[7] : false;
        return (
          <div key={videos.id} className="video-box">
          <h2 onClick={() => setModalOpen(true)}>{videos.title}</h2>
          <div className="video-image-box" onClick={() => setModalOpen(true)}>
            <img src={play} className="play-button"/>
            <img src={`https://img.youtube.com/vi/${res}/mqdefault.jpg`} />
          </div>
          {modalIsOpen ?
            <Modal style={customStyles} isOpen={modalIsOpen} onRequestClose={() => setModalOpen(false)}>
                <ReactPlayer 
                    url={`https://www.youtube.com/watch?v=${res}`}
                    playing   
                    config={{
                        youtube: {
                        playerVars: { showinfo: 1, controls: 1 }
                        }
                    }} 
                />
            </Modal>
            : null}
          </div>
        )})}
        </>
        )}}
    </Query>
  )
}

谢谢。

Answer 1

考虑到您一次只想打开一个模态，而不是在modelIsOpen中存储布尔值，而是使用字符串作为模态的ID

简短摘要

{modalIsOpen === videos.id ? <Modal style={customStyles} isOpen={modalIsOpen} onRequestClose={() => setModalOpen("")}>

和onClick

<h2 onClick={() => setModalOpen(videos.id)}>{videos.title}</h2>

完整代码：

const Video = () => {
  const [modalIsOpen, setModalOpen] = useState(false)
  return (
    <Query query={twoVideos}>
      {({ loading, error, data }) => {
          if (loading) return <h2>Loading post...</h2>
          if (error) return <h1>Error fetching the post!</h1>
          return (
              <>
              {data.video.map(videos => {
                  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
                  const match = videos.video.match(regExp);
                  const res = (match&&match[7].length==11)? match[7] : false;
              return (
                <div key={videos.id} className="video-box">
                <h2 onClick={() => setModalOpen(videos.id)}>{videos.title}</h2>
                <div className="video-image-box" onClick={() => setModalOpen(videos.id)}>
                  <img src={play} className="play-button"/>
                  <img src={`https://img.youtube.com/vi/${res}/mqdefault.jpg`} />
                </div>
                {modalIsOpen === videos.id ?
                  <Modal style={customStyles} isOpen={modalIsOpen} onRequestClose={() => setModalOpen("")}>
                      <ReactPlayer 
                          url={`https://www.youtube.com/watch?v=${res}`}
                          playing   
                          config={{
                              youtube: {
                              playerVars: { showinfo: 1, controls: 1 }
                              }
                          }} 
                      />
                  </Modal>
                  : null}
                </div>
              )})}
              </>
          )}}
    </Query>
  )
}

Answer 2

您可以像使用旧类一样使用对象。

例如，使用一个对象保存所有模态的状态

import React, { useState } from "react";
import "./styles.css";

export default function App() {

  const [modalState, setModalState] = useState({});

  const toggleModal = (key) => {
    setModalState({
      ...modalState,
      [key]: modalState[key] ? false : true,
    })
  }

  const getModalState = (key) => {
    return modalState[key] ? "Open" : "Closed";
  }

  return (
    <div className="App">
      <button onClick={() => toggleModal("1")}>Modal 1 ({getModalState("1")})</button>
      <button onClick={() => toggleModal("2")}>Modal 2 ({getModalState("2")})</button>
      <button onClick={() => toggleModal("3")}>Modal 3 ({getModalState("3")})</button>
    </div>
  );
}

工作代码： https://codesandbox.io/s/vigorous-euclid-hw0yn?file=/src/App.js:0-685

如何为状态挂钩添加密钥？

2 个答案: