react-daum-postcode/オフ

react-daum-postcodeは、反応素子によって作成されたDaum郵便番号検索サービスであり、反応環境で簡単に使用できる

npm install --save react-daum-postcode

インストール後に使用可能!

import React from 'react';
import DaumPostcode from 'react-daum-postcode';

const Postcode = () => {
  const handleComplete = (data) => {
    let fullAddress = data.address;
    let extraAddress = ''; 
    
    if (data.addressType === 'R') {
      if (data.bname !== '') {
        extraAddress += data.bname;
      }
      if (data.buildingName !== '') {
        extraAddress += (extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName);
      }
      fullAddress += (extraAddress !== '' ? ` (${extraAddress})` : '');
    }

    console.log(fullAddress);  // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
  }

  return (
    <DaumPostcode
      onComplete={handleComplete}
      { ...props }
    />
  );
}

インストール後はコードをコピー＆ペーストするだけで簡単に使用できます
コードを貼るだけなら
デフォルトでは、「≪アドレス検索｜Address Search｜ldap≫」ウィンドウが表示されます.
閉じるボタンがなく、アドレス検索が終了すると自動的に閉じる
ここで私が欲しいのは、アドレス検索をクリックすると、アドレス検索APIウィンドウが表示されます.
検索が終了しないように閉じるボタンを押すと、画面が閉じます
ボタンを閉じる情報をたくさん検索しましたが、特別な答えは見つかりませんでした.
最初に試した方法は次のコードです.

const [searchAddress, setSearchAddress] = useState(false);

const handleSearchAddress = () => {
  setSearchAddress(!searchopen);
};
  
<AdressDiv placeholder="주소를 검색해주세요" onClick={handleSearchAddress} defaultValue={writeInfo.address}/>

{searchAddress 
  ? <DaumPostcode onComplete={handleComplete} />
  : null}

このように試してみると、最初のアドレス入力は正しいが、もう一度アドレス入力を試してみるとエラーが発生する.
クローズボタンの追加方法を尋ねるの上のページで教えてくれた方法も解決していません.

解決策

import DaumPostcode from 'react-daum-postcode';

const [visible, setVisible] = useState(false); // 우편번호 컴포넌트의 노출여부 상태

const handleComplete = (data) => {
  let fullAddress = data.address;
  let extraAddress = ''; 

  if (data.addressType === 'R') {
    if (data.bname !== '') {
      extraAddress += data.bname;
    }
    if (data.buildingName !== '') {
      extraAddress += (extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName);
    }
    fullAddress += (extraAddress !== '' ? ` (${extraAddress})` : '');
  }
  setWriteInfo({ ...writeInfo, address : fullAddress})
  setVisible(false)
}

{visible? 
  <div>
    <button style={closeButton} title="닫기" onClick={() => setVisible(false)} >닫기</button> 
    <DaumPostcode 
      onComplete={handleComplete}
      style={addressStyle}
      height={700}
    />
  </div>
: null
}

<AdressDiv placeholder="주소를 검색해주세요" onClick={() => setVisible(true)} defaultValue={writeInfo.address}/>

郵便番号コンポーネントは、住所入力が完了すると自動的に閉じます.
handleCompleteでもステータスをfalseに変更し、ボタンを一緒に閉じる必要があります.

アクション画面

閉じるボタンを押して閉じることができて、更に住所を押して新しい住所を入力します
解決して大したことはないと思いましたが、いろいろな方法を探して試してみると、結構時間がかかりました.
最後に検索方法が見つからないので、このようにしてもいいですか?そして试してみると楽しく眠れるはずなのに….⭐️
https://www.npmjs.com/package/react-daum-postcode