无法使用打字稿获取输入值并使用它，如何修复？

Question

这是我的代码，但我无法让它工作，我正在使用react和typescript（我对两者都是新手），我不知道我做错了什么，它总是说：Uncaught TypeError ：无法读取 null 的属性（读取“值”）。我做错了什么？

====================================/ /============= ===============

import { Button } from "./components/ui/button"
import { Input } from "./components/ui/input"

function App() {
  const inputElement = document.getElementById('bla') as HTMLInputElement.value;
  console.log(inputElement)

  return (
    <>
    <div className="p-6 space-y-6">
      <div className="flex justify-center">
        <div className="flex justify-between w-1/2">
          <h1 id="bla">bla bla bla</h1>
          <Input id="pokemonInput" placeholder="Pokemon name" className="border rounded w-1/2"/>
          <Button>Pesquisar</Button>
        </div>
      </div>

      <div className="flex justify-center">
        <img src="" id="pokemonImage" className="border rounded w-1/2"/>
      </div>
    </div>
    <script type="module" src="./src/script.ts"></script>
    </>
  )
}



export default App

它应该获取字符串“bla bla bla”并console.log它，但无论如何我都无法获取属性“value”。

Answer 1

您正在尝试获取元素上的“value”属性，该元素没有此类属性。要获取 h1 元素的内容，可以在 const h1 = document.getElementById('bla'); 中设置然后使用另一个常量将属性“.textContent”设置为 const h1Value = h1?.textContent;