Ant Designの要素の値にアクセスする方法

コンポーネントの参照を取得する: Ant Designの要素の値にアクセスするためには、まず対象のコンポーネントへの参照を取得する必要があります。これは通常、Reactのrefを使用して行われます。以下は例です:

import { useRef } from 'react';
import { Input } from 'antd';
const MyComponent = () => {
  const inputRef = useRef(null);
  const handleButtonClick = () => {
    console.log(inputRef.current.value);
  };
  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={handleButtonClick}>値の取得</button>
    </div>
  );
};

上記の例では、Inputコンポーネントにref属性を追加して参照を取得しています。handleButtonClick関数内で、inputRef.current.valueを使用して入力値にアクセスしています。

状態管理を使用する: Ant Designの一部の要素は、状態を持つことができます。例えば、InputコンポーネントはvalueとonChangeプロパティを使用して制御された入力を実現できます。以下は例です:

import { useState } from 'react';
import { Input } from 'antd';
const MyComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };
  const handleButtonClick = () => {
    console.log(inputValue);
  };
  return (
    <div>
      <Input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleButtonClick}>値の取得</button>
    </div>
  );
};

上記の例では、useStateフックを使用してinputValueという状態を管理しています。InputコンポーネントのvalueプロパティにinputValueを渡し、onChangeイベントでinputValueを更新しています。handleButtonClick関数内で、inputValueをログに出力しています。

これらの方法を使用することで、Ant Designの要素の値にアクセスすることができます。適切な方法を選んで、アプリケーションのニーズに合わせて使用してください。