Preact Display Bootstrap Модальный - PullRequest
Новая
       7

Preact Display Bootstrap Модальный

0 голосов
/ 02 апреля 2019

Я использую preact 2.2.1, и я хочу отобразить мод загрузки при нажатии кнопки для редактирования данных. Пока я создаю модал как компонент, подобный этому 

import { h } from 'preact';
const ModalEditPSL = (props) =>{
    return (
        <div className="modal" tabindex="-1" role="dialog">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">Modal title</h5>
              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
              <p>Modal body text goes here.</p>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-primary">Save changes</button>
              <button type="button" className="btn btn-secondary" data-dismiss="modal" onClick={props.close}>Close</button>
            </div>
          </div>
        </div>
      </div>
    )
}

export default ModalEditPSL;

и вот мой index.js 

export default class List extends Component {
  state = {
      data : [],
      isLoading : true,
      isShowing:false,
      id_store_group:'0001_hoooo',
      node:'6282383324024'
    };
   //....
   //....
  render({}, {data,isLoading}) {
    if(isLoading){
      return(
        <div class={style.container}>
        <h3>Mengambil data...</h3>
        </div>
      );
    }
    else  {
      return (
        <div class={style.container}>
        { this.state.isShowing ? <div onClick={this.closeModalHandler} className="back-drop"></div> : null }

          <h1>Sales Price Level</h1>
          <table class="table table-hover">
            <thead>
              <tr>
                <td>ID</td>
                <td>Nama</td>
                <td></td>
              </tr>
            </thead>
            <tbody>
            {
              data.map((d,i)=>(
                <tr>
                    <td>{d.id}</td>
                    <td>{d.name}</td>
                    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onClick={this.edit.bind(this,d)}>
  Edit
</button><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" onClick={this.deleteData.bind(this,d)}>
  Delete
</button></td>
                </tr>
              ))
            }
            </tbody>
          </table>
          <ModalEditPSL className="modal"
          show={this.state.isShowing}
          close={this.closeModalHandler}>
              </ModalEditPSL>
        </div>

      );
    }
   }

что я хочу сделать, это отобразить модальный режим для редактирования данных, но он не работает, нужно ли загружать bootstrap.js? или я делаю не так?

...