Typescript

Question

在下面的例子中，如果我不做?。对于 event.target.value，打字稿有错误 Object is possibly null。与？。我收到错误 Property 'value' does not exist on type 'EventTarget'.

我需要做什么才能使 onchange 的事件类型正确？

import { createSignal } from "solid-js";

export default function Cards() {
  const [cellsWide, setCellsWide] = createSignal(0);

  return (
    <>
      <div>
        <select
          name="cellsWide"
          onChange={(e: Event) => {
            console.log(e?.target?.value);
          }}
        >
          <option value="5">5</option>
          <option value="3">3</option>
        </select>
      </div>
      <div>This is where cards goes - {cellsWide()}</div>
    </>
  );

Answer 1

事件处理程序应如下所示：

<select
  name="cellsWide"
  onChange={(e) => {
    console.log(e.currentTarget.value);
  }}
>

target 和 currentTarget 之间的区别解释 on MDN here。 target 是触发事件的元素，currentTarget 是处理程序所在的元素。这意味着严格来说，target 可能不是您定义处理程序的元素，它甚至可能不是 HTMLElement。因此，使用 currentTarget 是安全的选择。

Typescript - Solid.js <select> onchange 事件：属性 'value' 在类型 'EventTarget' 上不存在

Typescript - Solid.js <select> onchange event: Property 'value' does not exist on type 'EventTarget'

solid-js