【React】 onChange에서 값을 얻는 방법

개발 환경

코드

import * as React from "react";
import { useState } from "react";
import TextField from "@material-ui/core/TextField";

export default function SearchWindow() {
  const [value, setValue] = useState('default'); // valueをstateで管理

  return (
    <div>
      // 入力値をevent.target.valueで取得。setValueでvalueの値を更新
      <TextField onChange={(event) => setValue(event.target.value)} />
      <p>{value}</p>
    </div>
  );
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import SearchWindow from '.s earchWindow.tsx';

function App() {
  return (
    <SearchWindow />
  );
}

ReactDOM.render(<App/>, document.querySelector('#app'));

동작 확인