Reactでテキストフォームをリセットする方法をご教示いただけないでしょうか。
下記は動作デモです。
demo
テキストフォームに「ok」を入力し「check」ボタンを押すことで"ok"というアラートが表示されます。
テキストフォームに「ok」以外を入力し「check」ボタンを押した場合は、"no"というアラートが表示されます。
デモにおいて、「clear」ボタンを押すことで、テキストフォームをクリア(空に)したいです。
ソースコード
import React from "react";
let text = "";
const App = () => {
const inputValue = e => {
text = e.target.value;
};
const check = () => {
if (text === "ok") {
alert("ok");
return;
}
alert("no");
};
const clear = () => {
text = "";
};
return (
<>
<input type="text" onChange={inputValue} />
<p>please type "ok".</p>
<button onClick={clear}>clear</button>
<button onClick={check}>check</button>
</>
);
};
export default App;
試したこと
テキストフォームのvalueをstateとして管理すれば、テキストフォームの中をクリアすることできました。
demo2
しかし上記のデモだとテキストフォームの文字が変わる度にsetStateされ、そのたびにコンポーネントがレンダリングされます。
できるだけ不要なレンダリングは避けたいです。