[TIL]2021 1129-実戦種目第6週

17909 ワード
テキストリンク

今日やったこと


reactでtextarea文字数を制限する

  • の投稿を書くとき、onChangeが発生するたびに、1つの文字数を数え、最大文字数を制限する論理を書きます.
    • // 글자수 제한 함수
  const checkTextLength = (e, maxLength, setLength) => {
    let targetText = e.target.value;
    let textLength = e.target.value.length;

    if (textLength <= maxLength) setLength(e.target.value.length);
    else {
      e.target.value = targetText.substr(0, maxLength);
      setLength(maxLength);
    }
  };
    次は体現の画面です.入力した文字数に従って{length}/100でlength状態を更新します.

    textareaラベルにはサブラベルが入れられないので、外でdivで包み、中にp、textareaラベルを入れて、textareaのように見えるコンポーネントを構成しています.

    reactionからdrop boxを作成する

  • ユーザーのフィードバックで受け取ったコーヒーネットの欠点の中で、カフェの位置を正確に知ることができず、位置別に分類したり検索したりすることが望ましい.このようなフィードバックがたくさんあります.時間的には明日から発表の準備をしているようなので、地図や付加的な位置ベースのサービスを入れるのは無理だと思いますが、代わりにカフェの後期制作でDropboxで全国で都市を選ぶことができるので、検索するときにその都市を修正して検索結果が出てきます.
    本来はユーザーが勝手に位置を記入する方式なので、より正確な住所をフィルタして見せたいと思っています.
    投稿CRUDは私が担当している部分なので、私が担当することにしました.
    実装モードと同様です.
    •         // 드롭다운 state
          const [isDown, setIsDown] = useState(false);
          const [region, setRegion] = useState(isRegion);
 			
			...
            
	  <LocationBox>
            <DropDownBox>
              {isEdit ? (
                !isDown && !region ? (
                  <SelectText>{isRegion}</SelectText>
                ) : (
                  <SelectText>{region ? region : isRegion}</SelectText>
                )
              ) : (
                <SelectText>{region ? region : "지역 선택"}</SelectText>
              )}
              <DropDownIcon
                style={{ cursor: "pointer" }}
                onClick={() => {
                  setIsDown(!isDown);
                }}
              />
            </DropDownBox>

            <TextInput
              height="48px"
              width="calc((100% / 3) * 2)"
              border="1px solid #999"
              padding="14px 16px"
              borderNone
              ref={locationRef}
              onChange={(e) => {
                checkTextLength(e, 100, setLocationLength);
                setPost({ ...post, location: e.target.value });
              }}
              placeholder="카페 위치 (ex. 홍대 어딘가)"
              value={
                post && post.location
                  ? post.location.substr(
                      post.location.indexOf(" ") + 1,
                      post.location.length
                    )
                  : ""
              }
            />
          </LocationBox>
        )}
        {isDown && (
          <RegionListBox>
            {regionList.map((r) => (
              <Region
                key={r}
                onClick={() => {
                  setRegion(r);
                }}
              >
                {r}
              </Region>
            ))}
          </RegionListBox>
        )}

    解決した問題


  • リクエストデータを送信するときは、「試行」+「詳細位置」を一緒に送信し、修正するときは2つ、1つはドロップダウンボックス、1つはtextareaに入れるので、ここで少し時間がかかりました.
    ->JavaScript文字列の組み込み方法で解決します.substr, indexOf

  • モード変更時には、本来、受信した位置情報をpost.location.split(" ")[0]のように直接表示することで、locationを変更するとonChangeイベントが発生し、ドロップダウンボックスの位置情報も変化する.
    ->次のコードに示すように、モードを変更するときにregion stateの初期状態値をpost.location.split(" ")[0]に指定します.そうしないとnullに指定し、位置が変化しても影響を受けません.
    •   const isRegion = isEdit && post ? post.location.split(" ")[0] : null;

  // 드롭다운 state
  const [isDown, setIsDown] = useState(false);
  const [region, setRegion] = useState(isRegion);
    非ReverseMatch at error-REverse for"detail"withキーワードパラメータ{'pk':1}'notfound
    バッファスクロール