Установите состояние с правильными данными в React Modal - PullRequest
Новая
       21

Установите состояние с правильными данными в React Modal

0 голосов
/ 08 марта 2019

В моем проекте есть цикл, который отображает все элементы, существующие в моей базе данных 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", чтобы обновить мое состояние. Но я не могу передать информацию. Я перепробовал все, что мог себе представить, но не могу найти. У вас есть идея?

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 08 марта 2019

Создайте отдельный метод с именем 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>

Я надеюсь, что это помогает.

0 голосов
/ 08 марта 2019

Просто вызовите 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 });
 };

Надеюсь, это поможет!

...