動作基本(Project)

Udemy-一口大的反应

📌 日記帳の作成(2)

src/App.js

import "./App.css";
import DiaryEditor from "./DiaryEditor";

const App = () => {
  return (
    <div className="App">
      <DiaryEditor />
    </div>
  );
};
export default App;

src/DiaryEditor.js

▼▼▼▼▼▼ユーザー入力を受信したフォーム要素にコードを作成し、入力の長さが特定の長さより大きいことを確認します.
▼▼const handleSubmit:「日記を保存」ボタンをクリックしたときに実行する関数を修正
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼\9660

  const handleSubmit = () => {
    if(state.author.length < 1) {
      alert("작성자는 최소 1글자 이상 입력해주세요.");
      return; // 더 이상 출력되지 않도록
    }

    if(state.content.length < 5){
      alert("일기 본문은 최소 5글자 이상 입력해주세요.");
      return; // 더 이상 출력되지 않도록 
    }

    alert("저장 성공!");
  };

▼UX改良:文字数がalertより少ない場合は、フォーム要素にフォーカス

はどのDOM Elementに焦点を当てるべきですか?

☑️ useRef import

import { useState, useRef } from "react";

2つの定数を作成してuseref()を呼び出します.これらの定数はフォーカスするform要素に書き込まれます.

const authorInput = useRef();
const contentInput = useRef();

☑️ React.MutableRefObject:HTML DOM要素にアクセスする機能を持つ

ref={}:参照オブジェクトを介してDOM

にアクセス

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input ref={authorInput} name="author" value={state.author}
          onChange={handleChangeState} />
      </div>
      <div>
        <textarea ref={contentInput} name="content" value={state.content}
          onChange={handleChangeState} />
      </div>
    </div>
  );

▼const handleSubmitプラスフォーカス電流.focus()

useref機能を使用して作成するDOM要素の参照オブジェクトを選択すると、現在の値を現在のプロファイルとして

を使用できます.

authorInput.CurrentとcontentInput.Currentはいずれもtagとなり、tagの焦点

となる.

  const handleSubmit = () => {
    if(state.author.length < 1) {
      // focus
      authorInput.current.focus();
      return;
    }

    if(state.content.length < 5){
      // focus
      contentInput.current.focus();
      return;
    }

    alert("저장 성공!");
  };

📝 Result

import { useState, useRef } from "react";

const DiaryEditor = () => {

  const authorInput = useRef();
  const contentInput = useRef();

  const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1,
  });

  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = () => {
    if(state.author.length < 1) {
      // alert("작성자는 최소 1글자 이상 입력해주세요.");
      // focus
      authorInput.current.focus();
      return;
    }

    if(state.content.length < 5){
      // alert("일기 본문은 최소 5글자 이상 입력해주세요.");
      // focus
      contentInput.current.focus();
      return;
    }

    alert("저장 성공!");
  };

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input ref={authorInput} name="author" value={state.author}
          onChange={handleChangeState} />
      </div>
      <div>
        <textarea ref={contentInput} name="content" value={state.content}
          onChange={handleChangeState} />
      </div>
      <div>
        <select name="emotion" value={state.emotion} onChange={handleChangeState}>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
        </select>
      </div>
      <div>
        <button onClick={handleSubmit}>저장하기</button>
      </div>
    </div>
  );
};

export default DiaryEditor;

メールボックスから見ると、ユタ州は提供中、中でフィードバックを学んでいるようだ.
16時間=1000分に換算して、たくさん聞いたようで、何の理由もなく喜んでいます.🎉
(励振😊)