当前位置：首页 > article >正文

preact组件案例的使用

article 2025/3/12 17:16:25

制作一个下拉框

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 组件代码定义了一个名为 SelectValue 的函数组件，用于创建一个下拉选择框。让我们分解一下它的功能：

组件功能：

SelectValue 组件接收以下 props (属性)：

value: 当前选中的值。
setfn: 一个函数，用于更新父组件中的 value。当下拉选择框的值发生改变时，会调用这个函数。
options: 一个数组，包含了下拉选择框的选项。每个选项都是一个包含两个元素的数组：[value, label]，其中 value 是选项的值，label 是选项显示的文本。
disabled: 一个布尔值，指示下拉选择框是否禁用。

代码分解：

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

定义了一个名为 SelectValue 的函数组件，并使用了解构赋值来获取传入的 props。
export 关键字表示该组件可以被其他模块导入和使用。

const toInt = x => x == parseInt(x) ? parseInt(x) : x;:

定义了一个名为 toInt 的箭头函数。
这个函数的作用是将传入的值 x 转换为整数，如果 x 本身就是一个整数。如果 x 不是整数，则保持原样。
x == parseInt(x) 用于判断 x 是否可以安全地转换为整数而不丢失信息。例如，"1" == parseInt("1") 为真，而 "1.5" == parseInt("1.5") 为假。
这个函数用于确保 setfn 接收到的值是整数，如果选项的值是整数的话。

const onchange = ev => setfn(toInt(ev.target.value));:

定义了一个名为 onchange 的箭头函数，它将作为 <select> 元素的 onchange 事件处理函数。
当下拉选择框的值发生改变时，这个函数会被调用。
ev.target.value 获取到当前选中的选项的值（字符串类型）。
toInt(ev.target.value) 将获取到的值传递给 toInt 函数，尝试将其转换为整数。
setfn(...) 调用传入的 setfn 函数，并将转换后的值传递给它，从而更新父组件中的 value。

return html\\...\;:

使用 Preact 的 html 模板字符串来定义组件的 JSX 结构。
html\\...\`` 是 Preact 的一个标签模板字面量，用于创建虚拟 DOM 节点。

<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}>:

创建一个 <select> 元素（下拉选择框）。
onchange=${onchange} 将 onchange 函数设置为 <select> 元素的 onchange 事件处理函数。
class="..." 设置 <select> 元素的 CSS 类名，用于控制其样式。这些类名看起来像是来自 Tailwind CSS。
disabled=${disabled} 根据 disabled prop 的值来禁用或启用下拉选择框。

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

使用 options.map() 方法遍历 options 数组，为每个选项创建一个 <option> 元素。
v 是 options 数组中的每个元素，它是一个包含两个元素的数组：[value, label]。
<option value=${v[0]} selected=${v[0] == value}>${v[1]}<//> 创建一个 <option> 元素。
value=${v[0]} 设置 <option> 元素的 value 属性为选项的值。
selected=${v[0] == value} 设置 <option> 元素的 selected 属性。如果当前选项的值 v[0] 等于组件的 value prop，则该选项会被选中。
${v[1]} 设置 <option> 元素的显示文本为选项的标签。

<//> 是 Preact 中闭合标签的简写形式，相当于 </option>。

<//>:

闭合 <select> 标签，相当于 </select>。

总结：

SelectValue 组件是一个可复用的下拉选择框组件，它接收选项列表、当前选中的值以及一个用于更新值的函数作为 props。当用户选择不同的选项时，组件会调用 setfn 函数来更新父组件中的值。 toInt 函数用于确保传递给 setfn 的值是整数（如果选项值是整数）。该组件还支持禁用状态。

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 状态为 1。这意味着下拉列表的初始选中值为 1。
setSelectedValue：是更新 selectedValue 状态的函数。当下拉列表的值发生改变时，SelectValue 组件会调用这个函数，并将选中的值传递给它。
options：定义了下拉列表的选项。
<SelectValue ... />：渲染 SelectValue 组件，并将 value、setfn、options 和 disabled props 传递给它。
<p>Selected value: ${selectedValue}</p>：显示当前选中的值。

总结：

使用 SelectValue 组件的步骤如下：

导入组件。
定义状态（可选）。
定义选项。
渲染组件，并将必要的 props 传递给它。

希望这个解释能够帮助你理解如何使用 SelectValue 组件。