【React】onChangeで値を取得する方法

開発環境

• Typescript
• React
• Material UI

コード

onChangeの引数はevent.target.valueで取得できます。

searchWindow.tsx

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>
  );
}

useStateの使い方は下記を参考にしてください。
【React】カウンターAppでuseState, useEffectを使ってみた

app.tsx

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'));

動作確認