React MUI(Material UI) Dynamic Textfield

2150 ワード
dynamic mui material ui React TextField テキストリンク

Dynamic Textfield


ユーザが必要とするコンポーネントの追加と削除を実現したい.

ボタンの追加、削除


必要に応じて構成部品を追加および削除できるボタンを追加します.
                  <IconButton
                    disabled={fotaImages.length === 1}
                    onClick={() => handleRemoveFields(fotaImages.id)}
                  >
                    <RemoveIcon />
                  </IconButton>
                  <IconButton
                    disabled={fotaImages.length === 4}
                    onClick={handleAddFields}
                  >
                    <AddIcon />
                  </IconButton>

関数の追加、削除

  // Add Dynamic textfield
  const handleAddFields = () => {
    setFotaImages([...fotaImages, { fileName: "", componentId: "", imageId: "" }]);
  };

  // Remove Dynamic textfield
  const handleRemoveFields = (id) => {
    const values = [...fotaImages];
    values.splice(
      values.findIndex((value) => value.id === id),
      1
    );
    setFotaImages(values);
  };

実行画面




参考資料
https://github.com/candraKriswinarto/dymanic-form/blob/a142715acb4a4bb6eef177b918e7e0574cdf6c96/src/App.js#L46
[Network] HTTP
Chapter 1-5 Searching an Ordered Array