動的な値を受け取るためのReactのinputメソッドは何ですか。

1年 ago
綾乃, 一希
1 minute

React内では、useStateを使ってinputの値を動的に取得および設定することができます。

最初に、useStateをインポートする必要があります。

import React, { useState } from 'react';

その後、コンポーネント内で状態変数と対応する更新関数を定義します。

const [inputValue, setInputValue] = useState('');

次に、入力ボックスの値を状態変数にバインドし、更新関数を使用して状態変数の値を更新します。

<input
  type="text"
  value={inputValue}
  onChange={e => setInputValue(e.target.value)}
/>

inputValueという値を設定することで、入力ボックスに状態変数の値をバインドできます。入力ボックスの値が変化すると、onChangeイベントがトリガーされ、更新関数setInputValueを通じて状態変数の値が更新されます。

最後に、inputValueを使用して入力ボックスの値を取得し、適切な処理を行うことができます。

以下が完全なサンプルコードです：

import React, { useState } from 'react';

const App = () => {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
      />
      <p>输入的值是：{inputValue}</p>
    </div>
  );
}

export default App;

上記の例では、入力ボックスの値がリアルタイムで下の

タグに表示されます。

bannerAds