Reactで入力値を取得する
2024-10-16
ReactJSでクリック時に入力テキストの値を取得する方法
JavaScript
import React, { useState } from 'react';
function MyComponent() {
const [inputValue, setInputValue] = useState('');
const handleClick = () => {
console.log('入力値:', inputValue);
};
return (
<div>
<input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
<button onClick={handleClic k}>値を取得</button>
</div>
);
}
export default MyComponent;
解説
- useStateフック
useStateフックを使用して、入力テキストの値を管理する状態変数inputValueを定義します。初期値は空文字列です。 - handleClick関数
クリックイベントが発生したときに実行される関数です。console.logを使用して、inputValueの値を出力します。 - 入力テキスト
input要素を使用して、ユーザーがテキストを入力できるフィールドを作成します。valueプロパティ:inputValueの状態変数の値をバインドします。onChangeイベントハンドラー: 入力値が変更されたときに実行され、setInputValue関数を使用してinputValueの状態を更新します。
- ボタン
button要素を使用して、クリック時にhandleClick関数を呼び出すボタンを作成します。
使い方
- このコードをReactコンポーネントに貼り付けます。
- ブラウザでコンポーネントを表示します。
- 入力テキストに値を入力します。
- ボタンをクリックすると、コンソールに入力値が出力されます。
ポイント
onClickイベントハンドラーを使用して、ボタンをクリックしたときに関数を呼び出します。onChangeイベントハンドラーを使用して、入力値が変更されたときに状態を更新します。useStateフックを使用して、入力テキストの値を管理することで、入力値が変更されたときにコンポーネントを再レンダリングすることができます。
日本語でのコード解説
import React, { useState } from 'react';
function MyComponent() {
const [inputValue, setInputValue] = useState('');
const handleClick = () => {
console.log('入力値:', inputValue);
};
return (
<div>
<input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
<button onClick={handleClic k}>値を取得</button>
</div>
);
}
export default MyComponent;
注意
- このコードは、入力テキストの値をコンソールに出力するだけのシンプルな例です。実際のアプリケーションでは、取得した入力値を他の処理に利用する必要があります。
import React, { useState, useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
const handleClick = () => {
const inputValue = inputRef.current.value;
console.log('入力値:', inputValue);
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>値を取得</button>
</div>
);
}
export default MyComponent;
handleClick関数で、inputRef.current.valueを使用して入力値を取得します。useRefフックを使用して、入力要素への参照を取得します。
イベントハンドラーの直接使用
import React, { useState } from 'react';
function MyComponent() {
const [inputValue, setInputValue] = useState('');
const handleClick = (event) => {
const inputValue = event.target.value;
console.log('入力値:', inputValue);
};
return (
<div>
<input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
<button onClick={handleClic k}>値を取得</button>
</div>
);
}
export default MyComponent;
handleClick関数の引数にeventオブジェクトを受け取り、event.target.valueを使用して入力値を取得します。
カスタムフックの使用
import React, { useState, useRef } from 'react';
function useInputValue() {
const inputRef = useRef(null);
const [inputValue, setInputValue] = useState('');
const getInputValue = () => inputRef.current.value;
return [inputValue, setInputValue, getInputValue];
}
function MyComponent() {
const [inputValue, setInputValue, getInputValue] = useInputValue();
const handleClick = () => {
const inputValue = getInputValue();
console.log('入力値:', inputValue);
};
return (
<div>
<input type="text" ref={inputRef} value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
<button onClick={handleClick}>値を取得</button>
</div>
);
}
export default MyComponent;
getInputValue関数を使用して、入力値を取得します。- カスタムフック
useInputValueを使用して、入力値の管理と取得をカプセル化します。
選択基準
- カスタムフック
カスタムフックを使用する場合、入力値の管理と取得を再利用可能なコードとしてカプセル化できます。 - 参照
refを使用する場合、入力要素への直接アクセスが可能になります。 - 状態管理
useStateを使用する場合、入力値が変更されたときにコンポーネントが再レンダリングされます。
reactjs
