ReactJS |Kalkulator Reaksi Mudah

Artikel ini akan membimbing anda melalui proses mencipta kalkulator yang berfungsi dan mesra pengguna menggunakan ReactJS. Kami akan merangkumi konsep penting seperti pengurusan negeri, pengendalian acara dan struktur komponen untuk menjadikan projek ini boleh diakses oleh pemula dan pengalaman pembelajaran yang hebat untuk mereka yang biasa dengan React.

Persediaan Projek

Buat Apl React Baharu:
Mulakan dengan menyediakan projek React baharu menggunakan Apl Buat React:

npx create-react-app react-calculator
cd react-calculator
kandungan_salinan
Gunakan kod dengan berhati-hati.
Bash

Mulakan Pelayan Pembangunan:
Jalankan arahan berikut untuk melancarkan pelayan pembangunan anda:

npm mula
kandungan_salinan
Gunakan kod dengan berhati-hati.
Bash

Apl React anda boleh diakses di http://localhost:3000/.

Struktur Komponen

Kami akan menstrukturkan kalkulator kami menggunakan satu komponen: App.js. Komponen ini akan mengendalikan keseluruhan logik dan pemaparan kalkulator.

App.js (Komponen Utama)

import React, { useState } daripada "react";
import "./App.css";

fungsi Apl() {
const [displayValue, setDisplayValue] = useState("0");
const [operator, setOperator] = useState(null);
const [firstOperand, setFirstOperand] = useState(null);

// Fungsi untuk mengendalikan klik butang nombor
const handleNumberClick = (nombor) => {
if (displayValue === "0") {
setDisplayValue(number.toString());
} lain {
setDisplayValue(displayValue + number.toString());
}
};

// Fungsi untuk mengendalikan klik butang operator
const handleOperatorClick = (op) => {
setOperator(op);
setFirstOperand(parseFloat(displayValue));
setDisplayValue("0");
};

// Fungsi untuk mengendalikan sama dengan klik butang
const handleEqualsClick = () => {
const secondOperand = parseFloat(displayValue);
biar terhasil;

switch (operator) {
  case "+":
    result = firstOperand + secondOperand;
    break;
  case "-":
    result = firstOperand - secondOperand;
    break;
  case "*":
    result = firstOperand * secondOperand;
    break;
  case "/":
    if (secondOperand === 0) {
      result = "Error";
    } else {
      result = firstOperand / secondOperand;
    }
    break;
  default:
    result = "Invalid Operation";
}

setDisplayValue(result.toString());
setOperator(null);
setFirstOperand(null);

};

// Fungsi untuk mengendalikan klik butang jelas
const handleClearClick = () => {
setDisplayValue("0");
setOperator(null);
setFirstOperand(null);
};

kembali (

{/* Paparkan nilai semasa */}
{displayValue}

  {/* Button grid for calculator functions */}
  <div className="buttons">
    <button onClick={() => handleNumberClick("7")}>7</button>
    <button onClick={() => handleNumberClick("8")}>8</button>
    <button onClick={() => handleNumberClick("9")}>9</button>
    <button onClick={() => handleOperatorClick("/")}>/</button>
    <button onClick={() => handleNumberClick("4")}>4</button>
    <button onClick={() => handleNumberClick("5")}>5</button>
    <button onClick={() => handleNumberClick("6")}>6</button>
    <button onClick={() => handleOperatorClick("*")}>*</button>
    <button onClick={() => handleNumberClick("1")}>1</button>
    <button onClick={() => handleNumberClick("2")}>2</button>
    <button onClick={() => handleNumberClick("3")}>3</button>
    <button onClick={() => handleOperatorClick("-")}>-</button>
    <button onClick={() => handleNumberClick("0")}>0</button>
    <button onClick={() => handleNumberClick(".")}>.</button>
    <button onClick={() => handleEqualsClick()}>=</button>
    <button onClick={() => handleOperatorClick("+")}>+</button>
    <button onClick={() => handleClearClick()}>C</button>
  </div>
</div>

);
}

eksport Apl lalai;
kandungan_salinan
Gunakan kod dengan berhati-hati.
JavaScript

Penjelasan

Pengurusan Negeri:
Kami menggunakan cangkuk useState untuk mengurus keadaan kalkulator. displayValue memegang nilai semasa yang dipaparkan, operator menyimpan operasi yang dipilih dan firstOperand menyimpan nombor pertama yang dimasukkan.

Pengendalian Acara:
Fungsi seperti handleNumberClick, handleOperatorClick, handleEqualsClick dan handleClearClick mengendalikan interaksi pengguna dengan butang.

Komposisi Komponen:
Komponen Apl bertanggungjawab untuk kedua-dua logik dan pemaparan kalkulator, menunjukkan cara komponen boleh menggabungkan fungsi dan persembahan.

Menambah Penggayaan (App.css)

.kalkulator {
paparan: flex;
arah lentur: lajur;
lebar: 300px;
sempadan: 1px pepejal #ccc;
pelapik: 20px;
jejari sempadan: 5px;
}

.paparan {
ketinggian: 50px;
warna latar belakang: #eee;
saiz fon: 24px;
penjajaran teks: kanan;
pelapik: 10px;
jejari sempadan: 5px;
jidar bawah: 10px;
}

.butang {
paparan: grid;
grid-template-columns: repeat(4, 1fr);
jurang grid: 10px;
}

butang {
pelapik: 10px;
sempadan: tiada;
jejari sempadan: 5px;
warna latar belakang: #f0f0f0;
saiz fon: 18px;
kursor: penunjuk;
}

butang: tuding {
warna latar belakang: #ddd;
}
kandungan_salinan
Gunakan kod dengan berhati-hati.
Css

Kesimpulan

Dengan mengikuti langkah ini, anda telah mencipta kalkulator berfungsi sepenuhnya menggunakan React! Projek ini berfungsi sebagai asas yang hebat untuk penerokaan lanjut keupayaan React. Anda kini boleh menambah ciri seperti operasi lanjutan, fungsi memori, atau malah tema visual. Eksperimen dan berseronok!

Atas ialah kandungan terperinci ReactJS |Kalkulator Reaksi Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!