快捷導(dǎo)航

preact組件案例的使用詳解

更新時(shí)間：2025年03月11日 09:44:02 作者：不悔哥

SelectValue是一個(gè)Preact組件,用于創(chuàng)建一個(gè)下拉選擇框,它接收props如value、setfn、options和disabled,用于更新父組件中的值、處理下拉選擇框的值改變事件、顯示選項(xiàng)和禁用或啟用下拉選擇框,本文介紹preact組件案例的使用詳解,感興趣的朋友一起看看吧

制作一個(gè)下拉框

export function SelectValue({value, setfn, options, disabled}) {
  const toInt = x => x == parseInt(x) ? parseInt(x) : x;
  const onchange = ev => setfn(toInt(ev.target.value));
  return html`
<select onchange=${onchange} class="w-full rounded font-normal border py-0.5 px-1 text-gray-600 focus:outline-none text-sm disabled:cursor-not-allowed" disabled=${disabled}>
  ${options.map(v => html`<option value=${v[0]} selected=${v[0] == value}>${v[1]}<//>`) }
<//>`;
};

這段 Preact 組件代碼定義了一個(gè)名為 SelectValue 的函數(shù)組件，用于創(chuàng)建一個(gè)下拉選擇框。讓我們分解一下它的功能：

組件功能：

SelectValue 組件接收以下 props (屬性)：
value: 當(dāng)前選中的值。
setfn: 一個(gè)函數(shù)，用于更新父組件中的 value。當(dāng)下拉選擇框的值發(fā)生改變時(shí)，會(huì)調(diào)用這個(gè)函數(shù)。
options: 一個(gè)數(shù)組，包含了下拉選擇框的選項(xiàng)。每個(gè)選項(xiàng)都是一個(gè)包含兩個(gè)元素的數(shù)組：[value, label]，其中 value 是選項(xiàng)的值，label 是選項(xiàng)顯示的文本。
disabled: 一個(gè)布爾值，指示下拉選擇框是否禁用。

代碼分解：

1.export function SelectValue({value, setfn, options, disabled}) { ... }:

定義了一個(gè)名為 SelectValue 的函數(shù)組件，并使用了解構(gòu)賦值來(lái)獲取傳入的 props。
export 關(guān)鍵字表示該組件可以被其他模塊導(dǎo)入和使用。
2.const toInt = x => x == parseInt(x) ? parseInt(x) : x;:

定義了一個(gè)名為 toInt 的箭頭函數(shù)。
這個(gè)函數(shù)的作用是將傳入的值 x 轉(zhuǎn)換為整數(shù)，如果 x 本身就是一個(gè)整數(shù)。如果 x 不是整數(shù)，則保持原樣。
x == parseInt(x) 用于判斷 x 是否可以安全地轉(zhuǎn)換為整數(shù)而不丟失信息。例如，"1" == parseInt("1") 為真，而 "1.5" == parseInt("1.5") 為假。
這個(gè)函數(shù)用于確保 setfn 接收到的值是整數(shù)，如果選項(xiàng)的值是整數(shù)的話。
3.const onchange = ev => setfn(toInt(ev.target.value));:

定義了一個(gè)名為 onchange 的箭頭函數(shù)，它將作為 <select> 元素的 onchange 事件處理函數(shù)。
當(dāng)下拉選擇框的值發(fā)生改變時(shí)，這個(gè)函數(shù)會(huì)被調(diào)用。
ev.target.value 獲取到當(dāng)前選中的選項(xiàng)的值（字符串類型）。
toInt(ev.target.value) 將獲取到的值傳遞給 toInt 函數(shù)，嘗試將其轉(zhuǎn)換為整數(shù)。
setfn(...) 調(diào)用傳入的 setfn 函數(shù)，并將轉(zhuǎn)換后的值傳遞給它，從而更新父組件中的 value。
4.return html\\...\;:

使用 Preact 的 html 模板字符串來(lái)定義組件的 JSX 結(jié)構(gòu)。
html\\...\`` 是 Preact 的一個(gè)標(biāo)簽?zāi)０遄置媪浚糜趧?chuàng)建虛擬 DOM 節(jié)點(diǎn)。
5.<select onchange=${onchange} class="w-full rounded font-normal border py-0.5 px-1 text-gray-600 focus:outline-none text-sm disabled:cursor-not-allowed" disabled=${disabled}>:

創(chuàng)建一個(gè) <select> 元素（下拉選擇框）。
onchange=${onchange} 將 onchange 函數(shù)設(shè)置為 <select> 元素的 onchange 事件處理函數(shù)。
class="..." 設(shè)置 <select> 元素的 CSS 類名，用于控制其樣式。這些類名看起來(lái)像是來(lái)自 Tailwind CSS。
disabled=${disabled} 根據(jù) disabled prop 的值來(lái)禁用或啟用下拉選擇框。

6.${options.map(v => html\\<option value=${v[0]} selected=${v[0] == value}>${v[1]}<//>\)}:

使用 options.map() 方法遍歷 options 數(shù)組，為每個(gè)選項(xiàng)創(chuàng)建一個(gè) <option> 元素。
v 是 options 數(shù)組中的每個(gè)元素，它是一個(gè)包含兩個(gè)元素的數(shù)組：[value, label]。
<option value=${v[0]} selected=${v[0] == value}>${v[1]}<//> 創(chuàng)建一個(gè) <option> 元素。
value=${v[0]} 設(shè)置 <option> 元素的 value 屬性為選項(xiàng)的值。
selected=${v[0] == value} 設(shè)置 <option> 元素的 selected 屬性。如果當(dāng)前選項(xiàng)的值 v[0] 等于組件的 value prop，則該選項(xiàng)會(huì)被選中。
${v[1]} 設(shè)置 <option> 元素的顯示文本為選項(xiàng)的標(biāo)簽。
<//> 是 Preact 中閉合標(biāo)簽的簡(jiǎn)寫形式，相當(dāng)于 </option>。
7.<//>:

閉合 <select> 標(biāo)簽，相當(dāng)于 </select>。
總結(jié)：

SelectValue 組件是一個(gè)可復(fù)用的下拉選擇框組件，它接收選項(xiàng)列表、當(dāng)前選中的值以及一個(gè)用于更新值的函數(shù)作為 props。當(dāng)用戶選擇不同的選項(xiàng)時(shí)，組件會(huì)調(diào)用 setfn 函數(shù)來(lái)更新父組件中的值。 toInt 函數(shù)用于確保傳遞給 setfn 的值是整數(shù)（如果選項(xiàng)值是整數(shù)）。該組件還支持禁用狀態(tài)。

export function SelectValue({value, setfn, options, disabled}) {
  const toInt = x => x == parseInt(x) ? parseInt(x) : x;
  const onchange = ev => setfn(toInt(ev.target.value));
  return html`
<select onchange=${onchange} class="w-full rounded font-normal border py-0.5 px-1 text-gray-600 focus:outline-none text-sm disabled:cursor-not-allowed" disabled=${disabled}>
  ${options.map(v => html`<option value=${v[0]} selected=${v[0] == value}>${v[1]}<//>`) }
<//>`;
};
function DHCP({}) {
  const [selectedValue, setSelectedValue] = useState(1);
  const options = [
    [1, 'Option 1'],
    [2, 'Option 2'],
    [3, 'Option 3'],
  ];
  return html`
    <div>
      <${SelectValue}
        value=${selectedValue}
        setfn=${setSelectedValue}
        options=${options}
        disabled=${false}
      />
      <p>Selected value: ${selectedValue}</p>
    </div>
  `;
};

代碼解釋：

useState(1)：初始化 selectedValue 狀態(tài)為 1。這意味著下拉列表的初始選中值為 1。
setSelectedValue：是更新 selectedValue 狀態(tài)的函數(shù)。當(dāng)下拉列表的值發(fā)生改變時(shí)，SelectValue 組件會(huì)調(diào)用這個(gè)函數(shù)，并將選中的值傳遞給它。
options：定義了下拉列表的選項(xiàng)。
<SelectValue ... />：渲染 SelectValue 組件，并將 value、setfn、options 和 disabled props 傳遞給它。
<p>Selected value: ${selectedValue}</p>：顯示當(dāng)前選中的值。