Question

您好我正在玩ReactJS，发现这个超棒的Modal组件在Modal中打开Videoes，但是当我将Modal放在一个带有多个链接的循环中并打开模态时，如果我有5个则打开5次链接。我做错了什么？

模态组件：https://github.com/appleple/react-modal-video

public void setNavigationDrawerState(boolean isEnabled) {
if ( isEnabled ) {
    drawer.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
    toggle.setDrawerIndicatorEnabled(true);
    toggle.syncState();
}
else {
    drawer.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
    toggle.setDrawerIndicatorEnabled(false);
    toggle.setHomeAsUpIndicator(R.drawable.ic_keyboard_backspace_white_24dp);    

    toggle.syncState();
}

我的循环与模态组件内部：

import React from 'react'
import ReactDOM from 'react-dom'enter code here
import ModalVideo from 'react-modal-video'

class App extends React.Component {
 constructor () {
    super()
    this.state = {
      isOpen: false
    }
    this.openModal = this.openModal.bind(this)
  }

  openModal () {
    this.setState({isOpen: true})
  }

      render () {
        return (
          <div>
            <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='L61p2uyiMSo' />
            <button onClick={this.openModal}>Open</button>
          </div>
        )
      }
    }

    ReactDOM.render(
      <App />,
        document.getElementById('root')
    )

Answer 1

问题是每个ModalComponent使用相同的状态属性isOpen，因此当您单击任何链接时，它会设置此属性，并且每个ModalComponent都会打开。您应该为每个模态使用唯一属性（您可以使用已经用作key的属性）。

<li key={frags.id} className="group" id="" style={{width: 'calc(13% - 30px)'}}>
    <ModalVideo channel='youtube' isOpen={this.state.isOpen[frags.id]} videoId='{frags.url}' />
    <button onClick= {this.openModal.bind(this, frags.id)}>Open</button>
 </li>

你的方法：

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

Answer 2

原因是，您使用单个state变量来维持open/close modal状态，它可以正常运行一个，但是如果是多个模态，则必须使用多个状态值以维持状态，使用此：

将isOpen定义为州内的array：

this.state= {
    isOpen=[],
}

使用此方法change任何特定modal的状态：

openModal(index){
    let isOpen = this.state.isOpen.slice();
    isOpen[index] = true;
    this.setState({isOpen});
}

Bind index方法中每种模式的onClick：

render(){
    return(
        <div>
            {(this.props.frag.all == null) ? null :
              this.props.frag.all.map((frags, i) => {
              return (
              <li key={frags.id} className="group" id="" style={{width: 'calc(13% - 30px)'}}>
                <ModalVideo channel='youtube' isOpen={this.state.isOpen[i] || false} videoId='{frags.url}' />
                  <button onClick= {this.openModal.bind(this,i)}>Open</button>
              </li>
            )})
          }
      </div>
    )
}

Answer 3

循环中的模式有点复杂，因为它们需要为每一行使用唯一的键。使模态工作而不重复它是另一个挑战。我们许多人犯的第一个错误是将模态包含在循环中。为了防止重复模态，我们需要使其完全动态。我提供了一个完整的示例，而不必在循环内部重复模态。希望对您有帮助

这是一个完整的例子

import React, { Component } from 'react';
import { Button, Alert, Input, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';



class History extends Component
{
    constructor(props)
    {
        super(props);

        this.state = {
        userHistory: [{'id': 1, 'test': 'this is a test'}, {'id': 2, 'test': 'this is a test2'}, {'id': 3, 'test': 'this is a test3'}],
            showLog: false,
            logID: null

        }

    }




    render() 
    {


        const history = this.state.userHistory.map( (ticket, key) =>
        {
            return (
                    <tr key={key}>
                        <td>{ticket.test}</td>
                        <td>{ticket.id ? <Button  color="info" onClick={() => this.setState({logID:                          ticket.id, showLog: true})}>View</Button> : ''}</td>
                    </tr>
            ) 
        });


        

        return (

            

                <div className="card-body">

                    <table class="table table-striped">
                        <thead>
                            <tr>
                               
                                <th>test</th>
                                <th>modal</th>
                            </tr>
                        </thead>
                        <tbody>
                            {history}
                        </tbody>
                    </table>
                    
                    <Modal id={this.state.logID} isOpen={this.state.showLog} fade="false"  toggle={() => this.setState({showLog: false})}>
                    <ModalHeader toggle={() => this.setState({showLog: false})}>@jerryurenaa is awesome :D</ModalHeader>
                        <ModalBody>   
                            <p>Modal Number: {this.state.logID}</p>                     
                        </ModalBody>
                    <ModalFooter>


                        <Button onClick={() => this.setState({showLog: false})}>Cancel</Button>
                    </ModalFooter>
                    </Modal>
</div>

               

      
        );
    }
}


export default History;

ReactJS模态在循环中多次打开

3 个答案: