React Bootstrap Modal: Panduan Lengkap – Codewithaden

Dalam tutorial ini, kami akan menggunakan Bootstrap 4 dan React.js. Mudah digunakan bereaksi dengan bootstrap. Ada berbagai sifat yang digunakan dalam modal. Properti yang kita bahas di bawah:

Properti:

isopen: proptipes.bool,

Autofocus: PropTypes.Bool,

Pusat: PropTypes.Bool,

Ukuran: proptipes.string,

Toggle: proptipes.func,

Peran: PropTypes.Bool.

React Bootstrap Modal

Untuk membuat a modal bootstrap di Reaksi , menggunakan reactstrap Perpustakaan . Itu reactstrap Perpustakaan menyediakan Tombol , Modal , Modalheader , Modalbody , Modalfooter Komponen yang dapat kita gunakan untuk membuat modal bootstrap interaktif.

Kami akan menggunakan kerangka kerja Laravel untuk backend, dan untuk permintaan jaringan, kami menggunakan Axios Perpustakaan Untuk mengirim permintaan AJAX ke Laravel API.

Pertama, kami menginstal proyek React.

Langkah 1: Instal Proyek React JS

Buka terminal Anda dan tekan perintah berikut.

$ npx create-react-app reactjsbootstrapmodal 

Setelah membuat proyek, pindah ke direktori proyek dan ketik perintah berikut untuk bereaksi server.

yarn start 

Langkah 2: Instal ReactStrap dan Bootstrap.

Ubah ke terminal Anda dan ketik perintah berikut.

yarn add bootstrap@4.0.0 

Perintah di atas menambahkan Bootstrap 4 ke proyek kami.

yarn add reactstrap@next react react-dom 

Ini akan menambahkan reactstrap ke proyek kami.

Selanjutnya, kami akan mengimpor Bootstrap CSS di SRC >> index.js mengajukan.

impor   bootstrap/dist/css/bootstrap.css   

Langkah 3: Tentukan Komponen Bereaksi untuk Membuat Modal

Pergi ke SRC >> Komponen folder dan buat file baru yang dipanggil ModalComponent.js. File ini dihasilkan untuk modal.

//ModalComponent.js
import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

export default class ModalComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { modal: false,name: '',team :'' ,country: ''};

    this.toggle = this.toggle.bind(this);
    this.handleChangeName = this.handleChangeName.bind(this);
    this.handleChangeTeam = this.handleChangeTeam.bind(this);
    this.handleChangeCountry = this.handleChangeCountry.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }
  handleChangeName(event) {
    this.setState({name: event.target.value});
  }
  handleChangeTeam(event) {
    this.setState({team: event.target.value});
  }
  handleChangeCountry(event) {
    this.setState({country: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
     }


  render() {
    return (

        

React Bootstrap Modal Example

IPL 2018
); } }

Selanjutnya, kita dapat menambahkan komponen di App.js mengajukan.

//App.js

import React, { Component } from 'react';
import './App.css';
import ModalComponent from './components/ModalComponent';

class App extends Component {
  render() {
    return (
      
); } } export default App;

Langkah 4: Pasang Laravel

Instal Laravel dengan mengetikkan perintah berikut.

composer create-project --prefer-dist laravel/laravel LaravelReactModal 

Langkah 5: Konfigurasikan database.

Tambahkan kredensial basis data di .env mengajukan.

React

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravelreactmodal
DB_USERNAME=root
DB_PASSWORD= 

Langkah 6: Buat file model dan migrasi

php artisan make:model FormModal -m 

Ini akan membuat model dan file migrasi.

Langkah 7: Menetapkan skema dalam file migrasi

Pergi ke create_form_modals_table.php mengajukan dan menambahkan skema ke dalamnya.

public function up()
    {
        Schema::create('form_modals', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('team');
            $table->string('country');
            $table->timestamps();
        });
    }
 

Langkah 8: Atur rute dalam file API.php.

Kita dapat membuat pengontrol yang dipanggil FormModalController.php.

php artisan make:controller FormModalController --resource
 

Tambahkan rute berikut di API.PHP mengajukan.

Route::post('formmodal', 'FormModalController@store');
 

Kode fungsi toko di dalam file itu.

public function store(Request $request)
    {
        $form = new FormModal();
        $form->name=$request->get('name');
        $form->team=$request->get('team');
        $form->country=$request->get('country');
        $form->save();
        return response()->json('Successfully added');

    } 

Sekarang, mulailah server pengembangan Laravel dengan mengetikkan perintah berikut.

php artisan serve 

Langkah 9: Tambahkan Axios ke file komponen

Anda membutuhkan Axios . Pindah ke terminal Anda dan ketik perintah berikut.

yarn add axios
 

Kami dapat mengirim permintaan menggunakan Axios. Tapi, pertama, kita bisa Paket Impor Axios . Kemudian, tambahkan kode di bawah ini ke dalam file komponen.

import axios from 'axios'; 
const form = {
      name: this.state.name,
      team: this.state.team,
      country: this.state.country
    }
    let uri = 'http://localhost:8000/api/formmodal';
    axios.post(uri, form).then((response) => {
     this.setState({
        modal: !this.state.modal
      });
    }); 

Anda dapat menambahkan kode di atas ke dalam Handlesubmit peristiwa.

Kode terakhir dari ModalComponent.js File terlihat seperti di bawah ini.

//ModalComponent.js

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import axios from 'axios';

export default class ModalComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { modal: false,name: '',team :'' ,country: ''};

    this.toggle = this.toggle.bind(this);
    this.handleChangeName = this.handleChangeName.bind(this);
    this.handleChangeTeam = this.handleChangeTeam.bind(this);
    this.handleChangeCountry = this.handleChangeCountry.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }
  handleChangeName(event) {
    this.setState({name: event.target.value});
  }
  handleChangeTeam(event) {
    this.setState({team: event.target.value});
  }
  handleChangeCountry(event) {
    this.setState({country: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    const form = {
      name: this.state.name,
      team: this.state.team,
      country: this.state.country
    }
    let uri = 'http://localhost:8000/api/formmodal';
    axios.post(uri, form).then((response) => {
     this.setState({
        modal: !this.state.modal
      });
    });
  }


  render() {
    return (

        

React Bootstrap Modal Example

IPL 2018
); } }

Anda mungkin bertemu Tidak ada header ‘Access-Control-Allow-Origin’ di tutorial di atas tentang sumber daya yang diminta. Asal ‘http: // localhost: 3000’ Oleh karena itu tidak diizinkan akses. Responsnya memiliki kode status HTTP 500.

Anda akan dibuang dari kesalahan ini dengan pergi ke Tutorial Laravel React.js . Solusi terbaik yang cocok ada di sana.

React

Itu untuk tutorial ini.

Posting yang disarankan

Bereaksi material UI

React Context API

Bereaksi Pilih

Cara menyimpan beberapa nilai kotak centang di React JS

Bereaksi Datepicker

Bereaksi bilah sisi

Bereaksi AutoComplete

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *