#はじめに
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を指定してあげないといけなかったんですかね。
#終わりに
見た感じ上手くいったのはいいものの、何でこうなるのかちゃんとした理由をちゃんと学びたい。