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中使用正确的数据设置状态

2 个答案: