Не удается передать параметр для данных в Modal React JS - PullRequest
Новая
       46

Не удается передать параметр для данных в Modal React JS

0 голосов
/ 07 октября 2019

У меня есть дата, где появляется модальное окно, если вы выбираете строку. Я хотел бы, чтобы модальное окно отображало только данные выбранной строки с дополнительными деталями. Однако передача идентификатора выбранной строки для модального окна, кажется, не работает, и я не знаю почему? Или я не уверен, что является лучшим способом отображения информации в модальном окне?

** РЕДАКТИРОВАТЬ: я обнаружил, что если я заменю this.state.TicketID с t и иметь t = 0, то этотакже работает, так что это должно быть связано с вызовом this.state.TicketID внутри x []? 

        const {id, created} = t
      })
      return (
        <div>
        <Modal isOpen={this.state.modal} toggle={this.toggleModal} className={this.props.className}>
          <ModalHeader toggle={this.toggleModal}>Selected Item </ModalHeader>
          <ModalBody>
            <Datatable>
               <table className="table table-striped my-4 w-100">
                  <thead>
                     <tr>
                       <td>Ticket ID</td>
                       <td>Created On</td>
                     </tr>
                   </thead>
                   <tbody>
                     <tr key={this.state.TicketID}>
                       <td>{this.state.x[this.state.TicketID].id}</td>
                       <td>{this.state.x[this.state.TicketID].created}</td>
                     </tr>
                   </tbody>
                 </table>
              </Datatable>
          </ModalBody>
        </Modal>
      </div>
      );
    }

TicketID устанавливается во внешней функции и хранится в объекте состояния. Это обновление, как ожидалось. Я заметил, что если я делаю console.log ({this.state.x [0] .id}), то это работает. Однако если я сделаю console.log ({this.state.x [this.state.TicketID] .id}), он выдаст свойство Cannot read 'id' из неопределенного. Будем благодарны за любую помощь или новые предложения!

1 Ответ

0 голосов
/ 07 октября 2019

на самом деле для текущего варианта использования вам даже не нужно состояние модального уровня, поэтому вы просто делаете модальный компонент чистым компонентом (обычная функция js) и передаете значения как реквизиты! 

    // pass these form the parent components 
    const {isOpend , onToggle, ticket:{id,created} ={}}= props // or from `currentActiveTicket` as described below 
    // if you mounting the modal element on the same datatable level 
    // and you only change the state of the parent component
    // when a row is clicked you can add the `currentActiveTicket` as an object 
   // value of what you want to display on the modal(make sense)
  })
      return (
        <div>
        <Modal isOpen={isOpend} toggle={onToggle} className={this.props.className}>
          <ModalHeader toggle={this.toggleModal}>Selected Item </ModalHeader>
          <ModalBody>
            <Datatable>
               <table className="table table-striped my-4 w-100">
                  <thead>
                     <tr>
                       <td>Ticket ID</td>
                       <td>Created On</td>
                     </tr>
                   </thead>
                   <tbody>
                     <tr key={id}>
                       <td>{id}</td>
                       <td>{created}</td>
                     </tr>
                   </tbody>
                 </table>
              </Datatable>
          </ModalBody>
        </Modal>
      </div>
      );
    }

или вы должны поддерживать изменение реквизита и отражать это в модальном состоянии

для примера. Я попал в такого рода проблемы, потому что я недостаточно хорошо понимал эти концепции - componentDidUpdate проверьте ссылки на это

...