2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React TextFieldを削除ボタンで空白にする方法

Posted at

#はじめに
ReactでMaterial-uiのTextFieldを使って、削除ボタンで入力した内容を消す方法を紹介します。
全然難しいことじゃなさそうですが、ちょっとだけハマってしまったので。
ちなみにすごく簡単です。

#最初はこうしてた

App.js
import { useState } from 'react'
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';


function App() {

  const [text, setText] = useState('');

  const DeleteHandler = () => {
    setText('')
  }

  console.log(text);

  return (
    <div>
      <TextField
        id="text"
        label="text"
        onChange={(e) => {
          setText(e.target.value)
        }}
      />
      <Button
        variant="contained"
        onClick={DeleteHandler}
      >
        Delete
      </Button>
    </div>
  );
}

export default App;

DeleteHandlerでtextを空にしてるはずなのに。
console.log(text)で見てみると確かに値は空なのに、画面のTextFieldの文字は消えてくれない、、、

#こうしたら上手くいった

App.js
      <TextField
        id="text"
        label="text"
        value={text}
        onChange={(e) => {
          setText(e.target.value)
        }}
      />

value={text}の一文を加えるだけ。
valueを指定してあげないといけなかったんですかね。

#終わりに
見た感じ上手くいったのはいいものの、何でこうなるのかちゃんとした理由をちゃんと学びたい。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?