TSX输入值

Question

我正在开发一个使用React.JS的网络应用程序。

我希望输入是默认值，但输入不能是不可编辑的。

我试过：

let [inputValue, setInputValue] = useState<string>('Value of Input')
return (
    <div className = "App">
        <input value={inputValue}></input>
    </div>

问题是我无法编辑输入。

Answer 1

我认为输入需要onChange，可以通过onChange事件更改状态。

const handleOnChange = (event) => {
    setInputValue(event.target.value);
  };

您可以添加h1来查看状态中的内容

<h1>this is what inputValue state content: {inputValue}</h1>

整个代码将如下所示

import { useState } from "react";

export default function App() {
  const [inputValue, setInputValue] = useState("Value of Input");

  const handleOnChange = (event) => {
    setInputValue(event.target.value);
  };
  return (
    <div className="App">
      <h1>this is the content of inputValue state: {inputValue}</h1>
      <input onChange={(event) => handleOnChange(event)}></input>
    </div>
  );
}

Answer 2

<input value={inputValue} onChange={(e) => setInputValue(e.target.value)}></input>