Reactで、Formでテキスト送信後の内容リセットについて

Question

発生している問題

inputのvalueを送信後に、valueをリセットできない

該当のソースコード

import React, { useState } from "react";

export const Form = ({onAddtodo}) => {
const [text, setText] = useState("");

const submitForm = (event) => {
    event.preventDefault();
    onAddtodo(text);
}


return (
<div>
    <h4>New Todo</h4>
    <form onSubmit={submitForm}>
        <div>
            <input 
                type="text"
                value={text}
                onChange={(e) => setText(e.target.value)}
            />
        </div>
        <div>
            <button>add</button>
        </div>
    </form>
</div>
)

}

試したこと

ぐぐりつつ、参考になりそうなコードをいくつか試しましたが、うまくいきません。
アドバイスをいただけたらと思います。

Comments

[maisumakun]

> 参考になりそうなコードをいくつか試しましたが、うまくいきません。

このコードにはその「試したこと」は示されていますか？

[hoshi-takanori]

submitForm で setText("") は試しましたか？

[mittsan]

いいえ、このコードには示されていません。
試したことは、おそらくeventで送信後の処理を書くと思いましたので、event.input.value = "";をconst submitFormで実行してみました。

[mittsan]

setText("")でできました！ありがとうございました。

Answer 1

次のようにしてみてはいかがでしょうか

const submitForm = (event) => {
  event.preventDefault();
  onAddtodo(text);
  setText("")
}