React.jsでのテキストのクリア方法

1. 状態管理を使用する方法: Reactでは、状態を管理するためにuseStateフックを使用します。テキストをクリアするために、状態変数を初期化する必要があります。

import React, { useState } from 'react';
function ClearTextExample() {
  const [text, setText] = useState('');
  const clearText = () => {
    setText('');
  };
  return (
    <div>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={clearText}>クリア</button>
    </div>
  );
}

上記の例では、useStateフックを使用してtextという状態変数を宣言し、テキスト入力フィールドの値をその状態変数にバインドしています。クリアボタンがクリックされると、clearText関数が呼び出され、setText('')を使用して状態変数を空の文字列に設定します。

2. 参照（Ref）を使用する方法: もう1つの方法は、参照（Ref）を使用する方法です。参照を使用すると、DOM要素に直接アクセスできます。

import React, { useRef } from 'react';
function ClearTextExample() {
  const inputRef = useRef(null);
  const clearText = () => {
    inputRef.current.value = '';
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={clearText}>クリア</button>
    </div>
  );
}

上記の例では、useRefフックを使用してinputRefという参照を作成し、テキスト入力フィールドにその参照をバインドしています。クリアボタンがクリックされたとき、inputRef.current.valueを空の文字列に設定することでテキストをクリアします。

これらはReact.jsでテキストをクリアするためのシンプルで簡単な方法です。選択した方法をお使いいただき、必要に応じてカスタマイズしてください。