React 입력 양식을 가상 윈도우화

사용자 입력용 UI의 위치 결정이 번거롭다

프런트 엔드의 UI를 만들 때, 사용자 입력을 실시하기 위한 장소를 일부러 만드는 것은 나름대로 번거로운 작업입니다. 특히 배치 장소를 만드는 것이 나름대로 귀찮습니다. 이번에는 이것을 가능한 한 쉽게 해결하는 방법을 설명하고 싶습니다.

이 기사에서 ToDo를 입력하기 위한 어플리케이션을 만들었으므로, 그 입력 폼을 개조해 갑니다.

React-Redux가 어렵습니까? 그것은 과거의 이야기입니다! ~ ToDo 앱을 최소한의 노력으로 작성 ~

이번에 필요한 컴포넌트
　 htps //w w. 음 pmjs. 코 m / Pac 카게 / @ jswf / Rea ct

설치 방법

npm -D i @jswf/react

가상 윈도우를 이용하기 위해해야 ​​할 일

양식의 해당 부분을 JSWindow로 둘러싸기

<JSWindow>～</JSWindow>

이상으로 입력 폼의 가상 윈도우화가 완료되었습니다. 고마워요.

전회의 프로그램을 변경하면 이런 느낌입니다.

function FormComponent() {
  const todoModule = useModule(TodoModule);
  return (
   <JSWindow>{/*←追加*/}
    <div style={{ textAlign: "center" }}>
      <div>
        <div>タイトル</div>
        <input
          style={{ width: "20em" }}
          value={todoModule.getState("input", "title")!}
          onChange={e => todoModule.setState(e.target.value, "input", "title")}
        />
        <div>説明</div>
        <textarea
          style={{ width: "20em", height: "5em" }}
          value={todoModule.getState("input", "desc")!}
          onChange={e => todoModule.setState(e.target.value, "input", "desc")}
        />
        <div>
          <button onClick={() => todoModule.addTodo()}>Todoを作成</button>
        </div>
      </div>
    </div>
   <JSWindow>{/*←追加*/}
  );
}

　 더한 것은 JSWindow뿐입니다. 이렇게하면 다음과 같이 가상 창에 내용이 표시됩니다. 이 가상 윈도우는 사이즈가 가변, 이동, 최대화, 최소화의 기능이 디폴트로 붙어 있습니다.


이 가상 윈도우, 닫기 버튼이 탑재되어 있으므로 누르면 사라집니다. 그리고 다시 ToDO를 쓸 수 없게 된다는 자유를 손에 넣어 버립니다.

유석에 그러면 곤란하기 때문에, 닫은 윈도우를 다시 열 수 있도록 합니다.

interface TodoState {
  //入力中データの保持
  input: {
    title: string;
    desc: string;
  };
  //TODOリスト
  todos: {
    id: number;
    title: string;
    desc: string;
    done: boolean;
  }[];
  //TODOのID附番表index
  index: number;
  //ウインドウの状態
  windowState: WindowState; //<----- 追加
}
//初期値
protected static defaultState: TodoState = {
  todos: [],
  input: { title: "", desc: "" },
  index: 0,
  windowState: WindowState.HIDE //<----- 初期状態の追加
};

function FormComponent() {
  const todoModule = useModule(TodoModule);
  return (
    <>
      {/* ボタンの追加 */}
      <button
        onClick={()=>todoModule.setState({ WindowState: WindowState.NORMAL })}
      >
        ウインドウの表示
      </button>
      {/* タイトルとウインドウ状態設定を追加 */}
      <JSWindow title="ToDoの入力" windowState={todoModule.getState("WindowState")!}>
        <div style={{ textAlign: "center" }}>
          <div>
            <div>タイトル</div>
            <input
              style={{ width: "20em" }}
              value={todoModule.getState("input", "title")!}
              onChange={e =>
                todoModule.setState(e.target.value, "input", "title")
              }
            />
            <div>説明</div>
            <textarea
              style={{ width: "20em", height: "5em" }}
              value={todoModule.getState("input", "desc")!}
              onChange={e =>
                todoModule.setState(e.target.value, "input", "desc")
              }
            />
            <div>
              <button onClick={() => todoModule.addTodo()}>Todoを作成</button>
            </div>
          </div>
        </div>
      </JSWindow>
    </>
  );
}

windowState를 설정하면 가상 윈도우의 상태를 변경할 수 있습니다. 그래서 버튼을 누르면 상태를 NORMAL로 되돌려 다시 표시할 수 있게 되었습니다.

요약

이 가상 윈도우 컴포넌트는 복수 표시나 중첩도 가능합니다. 자세한 기능에 관해서는

React로 매우 간단하고 태그로 끼워 넣을 만한 가상 윈도우 구현

기사에서 설명하고 있습니다.