在 ReactJs 中将 props 传递给 modal

Question

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

\n\n

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

\n\n

先感谢您，

\n\n

这是我的代码：

\n\n

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 className="reference">{hit.reference}</h4>\n        <h4 className="marquesuite">{hit.marquesuite}</h4>\n        <p className="cote">{hit.cote}</p>\n        <button className="btn btn-warning" onClick={onEdit}>Modify Item</button>\n        <button className="btn btn-danger" onClick={() => removeToCatalogue(hit)}>Supprimer</button> \n    </div>\n\n  const Content = ({ onEdit }) => {\n\n    const EnhancedHit = props =>\n       <Hit onEdit={ onEdit } { ...props } />\n\n    return (\n      <div className="text-center">  \n        <Hits hitComponent={ EnhancedHit } />\n      </div>\n    )\n  }\n\n\n\n\nclass Admin extends React.Component {\n  constructor (props) {\n    super (props);\n\n    this.state = {\n      marque: \'\',\n      marquesuite: \'\',\n      numero: \'\',\n      reference: \'\',\n      cote: \'\',\n      avatar: "",\n      isUploading: false,\n      progress: 0,\n      avatarURL: "",\n      catalogue: {},\n      showModal: false,\n\n    };\n    this.onInputChange = this.onInputChange.bind(this);\n    this.onHandleSubmit = this.onHandleSubmit.bind(this);\n\n  }\n\n\n  onOpenModal = () => {\n    this.setState({ open: true });\n  };\n\n  onCloseModal = () => {\n    this.setState({ open: false });\n  };\n\n\n  onInputChange(e) {\n    this.setState({\n      [e.target.name]: e.target.value\n    });\n  }\n\n  onHandleSubmit(e){\n    e.preventDefault();\n    const catalogue = {\n      marque: this.state.marque,\n      marquesuite: this.state.marquesuite,\n      numero: this.state.numero,\n      reference: this.state.reference,\n      cote: this.state.cote,\n      avatar: this.state.avatar,\n      avatarURL: this.state.avatarURL,\n\n    };\n    database.push(catalogue);\n    this.setState({\n      marque: \'\',\n      marquesuite: \'\',\n      numero: \'\',\n      reference: \'\',\n      cote: \'\',\n      avatar: "",\n      isUploading: false,\n      progress: 0,\n      avatarURL: "",\n    });\n  }\n\n  handleUploadStart = () => this.setState({ isUploading: true, progress: 0 });\n  handleProgress = progress => this.setState({ progress });\n  handleUploadError = error => {\n    this.setState({ isUploading: false });\n    console.error(error);\n  };\n\n  handleUploadSuccess = filename => {\n    this.setState({ avatar: filename, progress: 100, isUploading: false });\n    firebase\n      .storage()\n      .ref("images")\n      .child(filename)\n      .getDownloadURL()\n      .then(url => this.setState({ avatarURL: url }));\n  };\n\n\n  render (){\n    const { open } = this.state;\n    return (\n      <div className="container-fluid">\n        <div className="container">\n        <h1 class="text-center">Espace d\'Administration</h1>\n        <a href="https://super-capsule.000webhostapp.com/signaler-modification" class="btn btn-primary btn-lg active" role="button" aria-disabled="true">Signaler une modification</a>\n        <form onSubmit={this.onHandleSubmit}>\n          <div className="form-group">\n          <label>Marque de la capsule:</label>\n          <input\n            value={this.state.marque}\n            type="text"\n            name=\'marque\'\n            placeholder="Marque"\n            onChange={this.onInputChange}\n            ref="marque"\n            className="form-control" />\n          </div>\n          <div>\n          <label>Num\xc3\xa9ro de la capsule:</label>\n          <input\n            value={this.state.numero}\n            type="text"\n            name=\'numero\'\n            placeholder="Num\xc3\xa9ro de la capsule"\n            onChange={this.onInputChange}\n            ref="numero"\n            className="form-control"/>\n          </div>\n          <div className="form-group">\n          <label>R\xc3\xa9f\xc3\xa9rence de la capsule:</label>\n          <input\n            value={this.state.marquesuite}\n            type="text"\n            name=\'marquesuite\'\n            placeholder="R\xc3\xa9f\xc3\xa9rence de la capsule"\n            onChange={this.onInputChange}\n            ref="marquesuite"\n            className="form-control"/>\n          </div>\n          <div className="form-group">\n          <label>R\xc3\xa9f\xc3\xa9rence de la capsule (suite):</label>\n          <input\n            value={this.state.reference}\n            type="text"\n            name=\'reference\'\n            placeholder="R\xc3\xa9f\xc3\xa9rence de la capsule (suite)"\n            onChange={this.onInputChange}\n            ref="reference"\n            className="form-control"/>\n          </div>\n          <div className="form-group">\n          <label>Cote de la capsule:</label>\n          <input\n            value={this.state.cote}\n            type="text"\n            name=\'cote\'\n            placeholder="Cote de la capsule"\n            onChange={this.onInputChange}\n            ref="cote"\n            className="form-control"/>\n          </div>\n\n          <label>Visuel de la capsule:</label>\n          {this.state.isUploading && <p>Progress: {this.state.progress}</p>}\n          {this.state.avatarURL && <img src={this.state.avatarURL} />}\n          <FileUploader\n            accept="image/*"\n            name="avatar"\n            randomizeFilename\n            storageRef={firebase.storage().ref("images")}\n            onUploadStart={this.handleUploadStart}\n            onUploadError={this.handleUploadError}\n            onUploadSuccess={this.handleUploadSuccess}\n            onProgress={this.handleProgress}\n          />\n          <button className="btn btn-info">Ajouter une capsule</button>\n        </form>\n      </div>\n\n        <h1 className="text-center">Catalogue de capsule</h1>\n\n\n\n        <InstantSearch\n            apiKey="xxx"\n            appId="xxx"\n            indexName="xxx">\n\n\n            <SearchBox translations={{placeholder:\'Rechercher une capsule\'}} width="500 px"/>\n\n\n            <Content onEdit={this.onOpenModal}/>  \n\n              <div>\n                <Modal open={open} onClose={this.onCloseModal} center>\n                  <h2>Modification de la capsule</h2>\n                  <p>Marque de la capsule:<input type="text" class="form-control" id="maj-marque" value=""></input></p>\n                  <p>Num\xc3\xa9ro de la capsule:<input type="text" class="form-control" id="maj-num" value=""></input></p>\n                  <p>R\xc3\xa9f\xc3\xa9rence de la capsule:<input type="text" class="form-control" id="maj-ref" value=""></input></p>\n                  <p>R\xc3\xa9f\xc3\xa9rence de la capsule (suite):<input type="text" class="form-control" id="maj-refsuite" value=""></input></p>\n                  <p>Cote de la capsule:<input type="text" class="form-control" id="maj-cote" value=""></input></p>\n                  <button className="btn btn-success">Update</button>\n\n                </Modal>\n            </div>  \n\n\n          </InstantSearch>\n\n\n\n      </div>\n    )\n  }\n}\n\n\n\nconst authCondition = (authUser) => !!authUser;\n\nexport default withAuthorization(authCondition)(Admin);\n

\n

Answer 1

您不需要将 props 传递给Modal组件。相反，保存您想要在Admin状态中显示的任何内容，并通过那里渲染它。

\n\n

在Hit组件中，onEdit函数应该采用一个参数，该参数是一个包含模态中所需的所有信息的对象。你曾经的地方<button className="btn btn-warning" onClick={onEdit}>Modify Item</button>将变成：

\n\n

    handleClick = () => {\n        // I simplified the data you need to be only marque and numero here and below.\n        onEdit({marque: hit.marque, numero: hit.numero})\n    }\n    <button className="btn btn-warning" onClick={handleClick}>Modify Item</button>\n

\n\n

然后在Admin组件中：

\n\n

    onOpenModal = (itemData) => {\n        this.setState({ open: true, itemData  });\n    };\n\n\n    <Modal open={open} onClose={this.onCloseModal} center>\n          <h2>Modification de la capsule</h2>\n          <p>Marque de la capsule:<input type="text" class="form-control" id="maj-marque" value={this.state.itemData.marque}></input></p>\n          <p>Num\xc3\xa9ro de la capsule:<input type="text" class="form-control" id="maj-num" value={this.state.itemData.numero}></input></p>\n          <button className="btn btn-success">Update</button>\n    </Modal>\n

\n\n

希望这可以帮助。如果您有任何疑问，请告诉我。

\n