在 React Modal 中使用正确的数据设置状态

Question

我的项目中有一个循环，它显示我的 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" 函数中，以更新我的状态。但是我不能传递信息。我尝试了我能想象的一切，但我找不到。你有什么想法吗？

提前致谢

Answer 1

只需在匿名函数中调用 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 });
 };

希望对您有所帮助！

Answer 2

创建一个名为 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>

希望对您有所帮助。

在 React Modal 中使用正确的数据设置状态

Set State with the right data in React Modal

reactjs

react-modal