标签: react-modal

我在反应本机和编程方面仍然是新手，我正在尝试将项目从我的平面列表传递到模式中。我要传递的是图标、状态和描述。我该怎么做？

这是我的平面列表

buildPanel(index, item) {
    let panel = [];
    let keys = DBkeys['Requests'].MyRequest;
    
    let status = item[keys['status']];
    panel.push(<View style={{ position: 'absolute', right: 0, bottom: 0, padding: normalize(5), alignItems: 'center' }} key={'status'}>
      <TouchableOpacity onPress={this.handleShowModal}>
        <Icon name={img.itemStatus[status].name} type={img.itemStatus[status].type} color={img.itemStatus[status].color} size={normalize(38)} />
      </TouchableOpacity>
    </View>);

    return panel;
    }
    
    <View style={[styles.panelContainer, status === 'success' ? {} : { backgroundColor: color.white }]}>
              <FlatList
                showsVerticalScrollIndicator={false}
                progressViewOffset={-10}
                refreshing={this.state.refreshing}
                onRefresh={this.onRefresh.bind(this)}
                onMomentumScrollEnd={(event) => event.nativeEvent.contentOffset.y === 0 ? this.onRefresh() : null}
                data={content}
                renderItem={({ item }) => item}
                keyExtractor={(item, key) => key.toString()} …

我正在通过数据进行映射，我想单击图像并显示一个包含 data.title 和 data.info 的模式弹出窗口。每个模式仅显示我的数组中的最后数据。我读到所有模态都一起弹出，但我只看到最后一个，但我不太明白如何解决问题，尤其是 React 中的函数组件。TIA

 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>
  );}

我正在使用 react 的基本组件模态组件 - https://github.com/reactjs/react-modal

我想要实现的是我想从另一个导入了模态的父级打开模态。

Parent.js
<button onClick={() => this.refs.setState({modalIsOpen: true})}> - THIS BUTTON ELEMENT IS IN ANOTHER COMPONENT

Modal.js
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
content : {
top                   : '50%',
left                  : '50%',
right                 : 'auto',
bottom                : 'auto',
marginRight           : '-50%',
transform             : 'translate(-50%, -50%)'
}
};

class App extends React.Component {
 constructor() {
 super();

 this.state = {
  modalIsOpen: false
 };

 this.openModal = this.openModal.bind(this);
 this.afterOpenModal = …

我正在使用 react-modal，我找不到任何方法来成功设置 Modal 的位置。我在每个在线示例中使用内联样式，但它们没有效果。我正在做我在 react-modal 站点上的 codepen 示例中看到的工作，但它在我的应用程序中不起作用。有些东西显然不同，但我看不出它是什么。

这就是我渲染模态的方式：

render: function() {
    return (
      <Modal
        bsSize={this.props.size}
        aria-labelledby="contained-modal-title-lg"
        show={this.props.show}
        style={{ content : {top: '70%'}}}
        onHide={this.hideModal}>
        <Modal.Header>
          <Modal.Title id="contained-modal-title-lg">{this.props.modalTitle}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {this.props.modalBody || this.modalBody}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.hideModal}>Cancel</Button>
          <Button bsStyle="primary" onClick={this.props.modalCallback}>{this.props.confirmButtonText}</Button>
        </Modal.Footer>
      </Modal>
    );

我为 style 属性尝试了许多不同的值，但我设置的任何值都无效。我也尝试过没有该bsSize属性，但这也不起作用。我只需要内容的顶部边框稍微低一些，因为它是在同一位置的另一个模态之上打开的，并且我希望它在视觉上明显地显示页面上打开了两个模态。我正在使用 react-modal 3.3.1。

我从一个开源项目开始：

https://github.com/vega/voyager

并使其正常工作，我想添加一个模式。

所以我跑了：

yarn add react-modal
yarn add @types/react-modal

然后我添加添加：

import {ReactModal} from 'react-modal';

我在./src/components/header/chrono-history.tsx（5,9）中生成错误时得到此错误：TS2305错误：模块'“ / Users / brennanwallace / psa / voyager / node_modules / @ types / react -modal / index“'没有导出的成员'ReactModal'。

并且web-storm同意存在一个问题，因为它在文本编辑视口中会产生相同的错误。

我能做什么？

我是初次输入脚本，但文件似乎按顺序排列：

像其他模态模块一样，node_modules的@types中有一个带有index.d.ts的react-modal文件夹（它缺少其他软件包似乎具有的types-metadata.json文件）。

还有一个反应模式程序包。

tsconfig.json文件似乎也按顺序排列：https : //github.com/vega/voyager/blob/vy2/tsconfig.json

我想实现像 Airbnb/Medium 这样的身份验证模式。当我在登录模式中单击“注册”时，登录模式关闭，注册模式打开。我阅读了 react-modal 文档，但没有看到这样做的方法。任何人都可以帮助我找到解决方案。谢谢。

我想使用 React js modal 获取动态内容我正在使用包 react-responsive-modal。首先，我通过地图渲染所有帖子。现在我希望当我点击个人帖子时，模态应该弹出并只显示该特定帖子的标题和正文。现在我不知道如何在模态中获取单个帖子。是否可以通过第三方包来做到这一点，或者我必须为此制作自定义模式？

import React from 'react';
    import Modal from 'react-responsive-modal';
    import Axios from 'axios';

    const styles = {
        fontFamily: 'sans-serif',
        textAlign: 'center'
    };

    class App extends React.Component {
        state = {
            posts: [],
            open: false
        };

        componentDidMount() {
            let url = 'https://jsonplaceholder.typicode.com/posts';
            Axios.get(url).then(res => {
                this.setState({
                    posts: res.data.slice(0, 10)
                });
                console.log(res.data.slice(0, 10));
            });
        }

        onOpenModal = () => {
            this.setState({ open: true });
        };

        onCloseModal = () => {
            this.setState({ open: false });
        };

        renderPosts() { …

我正在使用 Reactstrap Modal，有 ModalHeader，我在其中显示我的内容。但是当我尝试将该内容放在标题中心时，我遇到了问题。

在检查元素后，我发现 ModalHeader 中有一个<h5>标签，在这个标签内我的内容即将到来，我检查<h5>标签没有使用 Modal-Header 的完整宽度。我认为因为它没有位于中心。如果有人了解 Reactstrap Modal，请指导我如何将我的 Modal-Header 内容放在中心。提前致谢。

这是我的示例代码。

<ModalHeader toggle={props.toggle} > 
<div className="d-flex justify-content-center mb-2">
 <img src={myImg} alt="img" className="imgSize" /> 
</div> 
<div className="d-flex justify-content-center"> 
<p>Hi <b>John -</b> here is my some text</p>
</div> 
</ModalHeader>

我正在尝试为应用程序创建登录模式表单。但是，当我单击链接而不是按钮时，我希望弹出窗口出现。换句话说，当我点击导航栏中的登录链接时，我不想被完全重定向到另一个页面。我只想弹出模态。

我对 ReactJS 很陌生，所以我不知道该怎么做。有人可以帮我理解如何让这个功能工作吗？我真的很感激。

此外，如果有人知道有关如何实现正确登录表单的一些重要资源，我也将不胜感激。我在 CodePen 上找到了一些，但没有一个真正展示了如何构建这个组件的清晰易懂的方法。至少，对于我这样的初学者来说。

下面是我的代码。另外，如果有帮助，我提供了我目前使用的站点的链接作为构建此代码的参考。

资源：https : //react-bootstrap.github.io/components/modal/

应用程序.js

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Navbar from './components/Navbar/navbar.js';
import Footer from './components/Footer/footer.js';
import Home from './pages/Home/home.js';
import Login from './pages/Login/login.js';
import Languages from './pages/Languages/languages.js';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar/>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/login" component={Login}/>
            <Route path="/languages" component={Languages}/>
          </Switch>
      </BrowserRouter>
      <Footer />
    </div>
  );
}

export default App;

导航栏.js

import React from 'react';
import { …

我正在我的组织中开发基于 REACT 的网络应用程序 POC。有一个问题表，对于每个问题，我必须在表中提供一个按钮，当用户单击该按钮时，它将打开一个模式，通过 API 调用获取该问题的数据，然后将数据广播到那个模态。

问题：假设我在该表中列出了 300 个问题，因此有 300 个可单击按钮用于打开模式和调用 API。现在的问题是，每当该表加载时，它都会立即调用所有 300 个问题的 API，但我希望每个 API 仅在用户单击相应按钮时调用！

这是迄今为止我管理的模态组件的代码：

import React, { FunctionComponent, useState, useEffect } from 'react'; // importing FunctionComponent
import { Modal, Button } from 'react-bootstrap';

type IssueReportProps = {
    issueInfo: any
}

const IssueReport: FunctionComponent<IssueReportProps> = ({ issueInfo }) => {
    const issueNumber: string = issueInfo.number;
    const [show, setShow] = useState(false);
    const [diagnosisInfo, setdiagnosisInfo] = useState({});
    const handleClose = () => setShow(false);
    const handleShow = () …

我实际上正在开发我的第一个 React 应用程序。这是一个收藏应用程序。在此应用程序上，有一个管理仪表板，其中包含应用程序的所有项目，管理员用户可以删除或修改项目（就像传统的电子商务后台一样）。对于修改项目，管理员用户单击“修改项目”按钮，然后打开一个用于修改项目信息的模式。

我的问题是当用户打开模态时，模态工作正常，但我无法传递所选项目的信息（如品牌名称、参考、价格...）。我很抱歉在同一天再次提出问题，但我尝试了很多方法但没有结果。非常欢迎提供一点帮助。

先感谢您，

这是我的代码：

import React, { Component } from \'react\';\nimport { database } from \'../firebase/firebase\';\nimport * as firebase from \'firebase\';\nimport withAuthorization from \'./withAuthorization\';\nimport _ from \'lodash\';\nimport AuthUserContext from \'./AuthUserContext\';\nimport FileUploader from "react-firebase-file-uploader";\nimport Image from \'react-image-resizer\';\nimport{InstantSearch, SearchBox, Hits, Highlight, RefinementList} from "react-instantsearch/dom";\nimport Modal from \'react-responsive-modal\';\n\n\n\nfunction removeToCatalogue(hit) { \n  const item = hit.objectID;\n    firebase.database().ref(`catalogue/${item}`).remove();\n    console.log("Capsule correctement supprim\xc3\xa9e du catalogue")\n}\n\n\n\n\nconst Hit = ({hit, onEdit}) =>\n    <div className="item">\n       <img src={hit.avatarURL} width={150} height={150}></img>\n        <h1 className="marque">{hit.marque}</h1>\n        <h3 className="numero">{hit.numero}</h3>\n        <h4 …