MENGGUNAKAN PENUTUPAN JAVASCRIPT DALAM REACT-tutorial js-php.cn

MENGGUNAKAN PENUTUPAN JAVASCRIPT DALAM REACT

WBOY

Lepaskan： 2024-07-17 18:23:19

asal

902 orang telah melayarinya

USING JAVASCRIPT CLOSURES IN REACT

A Penutupan ialah ciri Javascript di mana fungsi, disertakan di dalam fungsi lain (fungsi luar), dikembalikan dan dipanggil di luar fungsi luar.

Penutupan terbentuk apabila fungsi dalaman mengekalkan akses kepada pembolehubah di luar skopnya aka skop leksikal; akses kepada pembolehubah dan hujah bagi fungsi luar walaupun selepas bahagian luar telah dilaksanakan.

Mari kita cipta fungsi penutupan kalkulator cukai untuk mengira cukai bagi minuman beralkohol dan bukan alkohol berdasarkan kadar cukainya.

const taxCalculator = (vat ) => {
  return function taxableAmount (amount) {
    const tax = amount * vat / 100;
    return tax
  }
}

//alcoholic drinks have their on VAT, lets say 16%
const alcoholTax = taxCalculator(16)
const alcoholA = alcoholTax(1200) // an Alcohol that costs 1200
const alcoholB=alcoholTax(800) // an Alcohol that costs 800

//non-alcoholic have their own VAT, let say 12%

const nonAlcoholTax = taxCalculator(12);
const water = nonAlcoholTax(500)
const Juice=nonAlcoholTax(300)

Salin selepas log masuk

Seperti yang anda boleh lihat, setiap minuman akan sentiasa mengingati kadar cukai mereka berdasarkan sama ada ia minuman beralkohol atau bukan alkohol iaitu fungsi yang dikembalikan digunakan di luar taxCalculator dan dapat mendapatkan semula parameter vat nilai walaupun yang utama fungsi cukaiKalkulator telah dilaksanakan.

Dalam react js, perpustakaan UI JavaScript, pengendali acara diisytiharkan sebaris pada JSX seperti itu.

<button  onClick={handleClick}>Click me</button>

Salin selepas log masuk

Jika pengendali acara mempunyai hujah, ia kemudiannya akan digunakan dalam fungsi seperti itu.

function ActionButtons(){
const actions = ["Create", "Edit", "Delete"]
const handleAction = (action) => {
    switch (action) {
      case actions[0]:
        //do something
        break;
      case actions[1]:
        //do something
        break;
      case actions[2]:
        //do something
        break;

      default:
        // do nothing
        break;
    }
  }
return (
<div className="flex flex-col md:flex-row w-full p-4 gap-4 ">
  { actions.map(action => 
<button 
className="w-full md:w-60" 
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
onClick={()=>handleAction(action)}>{action}</button>)}
  </div>)
}

Salin selepas log masuk

Perhatikan bahawa handleAction dirangkumkan oleh fungsi anak panah apabila memberikannya kepada pengendali acara onclick.

Dengan penutupan kita hanya boleh memanggil handleAction dengan hujah tindakan kemudian mengembalikan fungsi dalaman yang mengambil hujah tindakan dan melakukan tindakan yang lain seperti itu.

function ActionButtons() {
  const actions = ["Create", "Edit", "Delete"];
  const handleAction = (action) => {
    return function () {
      console.log(` ${action} Action button clicked`);
      switch (action) {
        case actions[0]:
          //do something
          break;
        case actions[1]:
          //do something
          break;
        case actions[2]:
          //do something
          break;

        default:
          // do nothing
          break;
      }
    };
  };
  return (
    <div className="flex flex-col md:flex-row  w-full p-4 gap-4 justify-between">
      {actions.map((action) => (
        <button 
className="w-full md:w-60"
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
 onClick={handleAction(action)}>
          {action}
        </button>
      ))}
    </div>
  );
}

Salin selepas log masuk

Perhatikan cara kami menggunakan handleAction terus pada acara OnClick? juga perhatikan bahawa kami telah memfaktorkan semula fungsi handleAction supaya ia mengembalikan fungsi yang melakukan tindakan yang diperlukan dengan suis ?

HandleAction digunakan apabila komponen dipasang, penutupan berlaku apabila fungsi dikembalikan oleh handleAction merebut dan berpegang pada nilai argumen pada handleAction walaupun ia (handleAction) dilaksanakan semasa paparan pertama.
Ia merupakan cara yang kemas untuk mengendalikan acara dalam Javascript.apa pendapat anda?

Atas ialah kandungan terperinci MENGGUNAKAN PENUTUPAN JAVASCRIPT DALAM REACT. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!