0

我的项目中有一个循环，它显示了我的 Firebase 数据库中存在的所有项目。我为此使用 Lodash 和 renderPosts 方法，就像您在以下代码中看到的那样：

   renderPosts() {
    const { open } = this.state;
    this.removeToCollection = this.removeToCollection.bind(this);
    return _.map(this.state.cotations, (cotations, key) => {
      return (
        <div className="item col-md-12" key={key} id={key}>
            <h3>{cotations.nom}</h3>
            <p>Contenu: {cotations.content}</p>

            <button className="btn btn-danger" onClick={(e) => {if(window.confirm('Voulez vous vraiment supprimer cette capsule du catalogue ?')){this.removeToCollection(key, e)};}}>Supprimer</button>
            <button className="btn btn-warning" onClick={this.onOpenModal}>Modify</button>


            <Modal open={open} onClose={this.onCloseModal} center>
              <h2>{cotations.nom}</h2>
              <form>
              <p>Nom du document:<input type="text" class="form-control" name="nom"  value={this.state.nom} onChange={this.onInputChange}></input></p>
              <CKEditor
                    editor={ ClassicEditor }
                    data= {this.state.content}
                    onChange={this.handleEditorChange()}
                />

              <button className="btn btn-success" onClick={this.updateContent}>Update</button>
              </form>
            </Modal>
        </div>
      )
    })
  }

另外，我希望当用户单击修改按钮时，会打开一个可以修改项目的模式。为此，我使用“React-Responsive-Modal”和以下代码：

  onOpenModal = () => {
    this.setState({ open: true, nom: '???' , content: '???', });
  };

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

要在我的模式中检索我必须修改的项目的信息，我必须将它们传递到我的“onOpenModal”函数中，以更新我的状态。但我不能传递信息。我尝试了我能想象的一切，但我找不到。你有想法吗 ？

先感谢您

4

2 回答 2

0

制作一个单独的方法，称为onModifyClick：

 onModifyClick = (nom, content, index) => () => {
    const newCotations = this.state.cotations.map((item, i) =>
      i === index ? { ...item, num, content } : item
    );
    this.setState({ contations: newCotations });
  };

然后您可以调用它并用作闭包，捕获我们修改状态所需的数据：

<button className="btn btn-warning" onClick={this.onModifyClick(num, content, key)}>Modify</button>

我希望它有所帮助。

于 2019-03-08T10:44:36.070 回答
0

只需调用onOpenModal匿名函数并将所需的值作为参数传递给openModal

<button className="btn btn-warning" onClick={()=>{ this.onOpenModal(cotations.nom,cotations.content) }}>Modify</button>

并更改openModal以使用这些参数

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

   //or this if you want to use ES6 concise properties
   //this.setState({ open: true, nom, content });
 };

希望这可以帮助 ！

于 2019-03-08T10:26:01.053 回答