[解決済み] Reactで複数のMaterial UIチェックボックスを処理する

2022-03-05 13:17:30

質問

チェックボックスの値は、チェックボックスをオフにした場合は削除され、チェックした場合は追加されるようにしたいです。これまでのところ、私は配列に単一の値のみを与えるこのコードを持っていますが、私は1つの配列にすべてのチェックされた値を必要とします。

import React from 'react';
import DropDown from './DropDown';
import TextField from '@material-ui/core/TextField';
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import RadioButton from './RadioButtons';
import MultiSelect from './MultiSelect';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Box from '@material-ui/core/Box';
import { DropzoneDialog } from 'material-ui-dropzone';
import createpagestyle from './Createpage.css';
import Chip from '@material-ui/core/Chip';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import Checkbox from '@material-ui/core/Checkbox';
import { grey } from '@material-ui/core/colors';
import { useState } from 'react';

const useStyles = makeStyles((theme) => ({
  typography: {
    fontSize: '3.5 rem',
    fontWeight: '550',
    color: '#0E1941',

    [theme.breakpoints.down('md')]: {
      fontSize: '0.5rem',
    },
    [theme.breakpoints.up('md')]: {
      fontSize: '1.0rem',
    },
    [theme.breakpoints.up('lg')]: {
      fontSize: '1.2rem',
    },
  },

  Table: {
    width: '60%',
  },

  Td: {
    width: '250px',
  },
  Td_Checkbox: {
    width: '60px',
  },
}));

var Claim = [
  { key: 0, label: 'CLAIM OWNER', name: 'DESIREE MOHUKA' },
  { key: 1, label: 'AUTHORITY CONSULTANT', name: 'XXXXXXXXXXXX' },
  { key: 2, label: 'PROCESSOR CLAIM', name: 'XXXXXXXXXXXX' },
  { key: 3, label: 'CONTROLLLER', name: 'XXXXXXXXXXXX' },
  { key: 4, label: 'MANAGER', name: 'XXXXXXXXXXXX' },
];

var Dwelling = [
  { key: 0, label: 'CLAIM HANDLER', name: 'DESIREE MOHUKA' },
  { key: 1, label: 'CONTROLLLER', name: 'XXXXXXXXXXXX' },
  { key: 2, label: 'PERFORMER', name: 'XXXXXXXXXXXX' },
];

var Unscheduler_pp = [
  { key: 0, label: 'CLAIM HANDLER', name: 'DESIREE MOHUKA' },
  { key: 1, label: 'CONTROLLLER', name: 'XXXXXXXXXXXX' },
  { key: 2, label: 'PERFORMER', name: 'XXXXXXXXXXXX' },
];

export default function Participantpage(props) {
  if (props.visibility) {
    const classes = useStyles();
    const [participant, setParticipant] = React.useState([]);

    let handleCheckboxChange = (event) => {
      let newArray = [event.target.id];
      if (participant.includes(event.target.id)) {
        newArray = newArray.filter((value) => value !== event.target.id);
      }
      setParticipant(newArray);
    };

    return (
      <div>
        <Grid container spacing={2}>
          <Grid item xs={9}>
            POLICY: XXXXXXXXXX
          </Grid>
          <Grid item xs={3}>
            INSURED: XXXXXXXXXX
          </Grid>
          <Grid item xs={12}>
            <div style={{ backgroundColor: '#E9E9E9', width: '100%' }}>
              <Typography
                variant='body1'
                className={classes.typography}
                style={{
                  marginTop: '10px',
                  marginBottom: '30px',
                  font: 'normal normal medium 20px/24px Allstate Sans W',
                }}
              >
                CLAIM{' '}
              </Typography>
            </div>
          </Grid>
        </Grid>
        <tbody className={classes.Table}>
          {Claim.map((data) => {
            return (
              <tr>
                <td className={classes.Td_Checkbox}>
                  {' '}
                  <Checkbox
                    id={data.name}
                    onChange={handleCheckboxChange}
                    color='default'
                  />{' '}
                </td>
                <td className={classes.Td}>{data.label}</td>
                <td className={classes.Td}>{data.name}</td>
              </tr>
            );
          })}
        </tbody>

        <Grid container spacing={2}>
          <Grid item xs={12}>
            <div style={{ backgroundColor: '#E9E9E9', width: '100%' }}>
              <Typography
                variant='body1'
                className={classes.typography}
                style={{
                  marginTop: '10px',
                  marginBottom: '30px',
                  font: 'normal normal medium 20px/24px Allstate Sans W',
                }}
              >
                DWELLING{' '}
              </Typography>
            </div>
          </Grid>
        </Grid>
        <tbody className={classes.Table}>
          {Dwelling.map((data) => {
            return (
              <tr>
                <td className={classes.Td_Checkbox}>
                  {' '}
                  <Checkbox
                    id={data.name}
                    onChange={handleCheckboxChange}
                    color='default'
                  />{' '}
                </td>
                <td className={classes.Td}>{data.label}</td>
                <td className={classes.Td}>{data.name}</td>
              </tr>
            );
          })}
        </tbody>

        <Grid container spacing={2}>
          <Grid item xs={12}>
            <div style={{ backgroundColor: '#E9E9E9', width: '100%' }}>
              <Typography
                variant='body1'
                className={classes.typography}
                style={{
                  marginTop: '10px',
                  marginBottom: '30px',
                  font: 'normal normal medium 20px/24px Allstate Sans W',
                }}
              >
                UNSCHEDULER PERSONAL PROPERTY{' '}
              </Typography>
            </div>
          </Grid>
        </Grid>
        <tbody className={classes.Table}>
          {Unscheduler_pp.map((data) => {
            return (
              <tr>
                <td className={classes.Td_Checkbox}>
                  {' '}
                  <Checkbox
                    id={data.name}
                    onChange={handleCheckboxChange}
                    color='default'
                  />{' '}
                </td>
                <td className={classes.Td}>{data.label}</td>
                <td className={classes.Td}>{data.name}</td>
              </tr>
            );
          })}
        </tbody>
        {console.log(participant)}
      </div>
    );
  } else {
    return <div></div>;
  }
}

解決方法は？

上記のコードを再作成してみたところ、2つの解決策が見つかりました。つ目は ロジックをApp.jsで処理することは推奨されません。 .

しかし、App.jsで状態を作成し、別のコンポーネントでロジックを処理することで、2番目のオプションを使用することができます。

1つの状態を2つ以上の子コンポーネントで使用する必要がある場合は、reduxを使用することをお勧めします。

別コンポーネントで処理されるロジック
App.js

import "./styles.css";
import Checkbox from "./Checkbox";

const CLAIMS = [
  { key: 0, label: "CLAIM OWNER", name: "DESIREE MOHUKA" },
  { key: 1, label: "AUTHORITY CONSULTANT", name: "XXXXXXXXXXXX" },
  { key: 2, label: "PROCESSOR CLAIM", name: "XXXXXXXXXXXX" },
  { key: 3, label: "CONTROLLLER", name: "XXXXXXXXXXXX" },
  { key: 4, label: "MANAGER", name: "XXXXXXXXXXXX" }
];

const DWELLINGS = [
  { key: 0, label: "CLAIM HANDLER", name: "DESIREE MOHUKA" },
  { key: 1, label: "CONTROLLLER", name: "XXXXXXXXXXXX" },
  { key: 2, label: "PERFORMER", name: "XXXXXXXXXXXX" }
];

const UNSCHEDULER_PP = [
  { key: 0, label: "CLAIM HANDLER", name: "DESIREE MOHUKA" },
  { key: 1, label: "CONTROLLLER", name: "XXXXXXXXXXXX" },
  { key: 2, label: "PERFORMER", name: "XXXXXXXXXXXX" }
];

export default function App() {
  return (
    <div>
      <div>
        <Checkbox list={CLAIMS} title="Claims" />
        <Checkbox list={DWELLINGS} title="Dwellings" />
        <Checkbox list={UNSCHEDULER_PP} title="Unscheduler" />
      </div>
    </div>
  );
}

チェックボックス.js

import { useState } from "react";

/* parses check box data from props.list element
 * @params {{title: string, list:{name: string, id: number}[]}} props
 */
const Checkbox = (props) => {
  const [participants, setParticipants] = useState([]);

  // logic to add or remove elements check or unchecked form an array.
  const handleCheckboxChange = (event) => {
    const id = event.target.id;
    setParticipants((currentParticipants) =>
      currentParticipants.includes(id)
        ? currentParticipants.filter((f) => f !== id)
        : [...currentParticipants, id]
    );
  };

  console.log("participants", participants);

  // creates all the checkbox based on the list array.
  const checkbox = props.list.map((m) => (
    <span key={m.key}>
      <input type="checkbox" id={m.key} onClick={handleCheckboxChange} />
      {m.name}
    </span>
  ));

  return (
    <div>
      <div>{checkbox}</div>
      <div>{props.title}</div>
    </div>
  );
};

export default Checkbox;

App.jsで扱うロジック（必要な場合以外は推奨しない）
App.js

import "./styles.css";
import Checkbox from "./Checkbox";
import { useState } from "react";

const CLAIMS = [
  { key: 0, label: "CLAIM OWNER", name: "DESIREE MOHUKA" },
  { key: 1, label: "AUTHORITY CONSULTANT", name: "XXXXXXXXXXXX" },
  { key: 2, label: "PROCESSOR CLAIM", name: "XXXXXXXXXXXX" },
  { key: 3, label: "CONTROLLLER", name: "XXXXXXXXXXXX" },
  { key: 4, label: "MANAGER", name: "XXXXXXXXXXXX" }
];

const DWELLINGS = [
  { key: 0, label: "CLAIM HANDLER", name: "DESIREE MOHUKA" },
  { key: 1, label: "CONTROLLLER", name: "XXXXXXXXXXXX" },
  { key: 2, label: "PERFORMER", name: "XXXXXXXXXXXX" }
];

const UNSCHEDULER_PP = [
  { key: 0, label: "CLAIM HANDLER", name: "DESIREE MOHUKA" },
  { key: 1, label: "CONTROLLLER", name: "XXXXXXXXXXXX" },
  { key: 2, label: "PERFORMER", name: "XXXXXXXXXXXX" }
];

export default function App() {
  const [claimParticipants, setClaimParticipants] = useState([]);
  const [dwellingParticipants, setDwellingParticipants] = useState([]);
  const [unschedulerParticipants, setUnschedulerParticipants] = useState([]);

  // logic to add or remove elements check or unchecked form an array.
  const handleCheckboxChange = (event, setParticipants) => {
    const id = event.target.id;
    setParticipants((currentParticipants) =>
      currentParticipants.includes(id)
        ? currentParticipants.filter((f) => f !== id)
        : [...currentParticipants, id]
    );
  };

  console.log("claimParticipants", claimParticipants);
  console.log("dwellingParticipants", dwellingParticipants);
  console.log("unschedulerParticipants", unschedulerParticipants);

  return (
    <div>
      <div>
        <Checkbox
          list={CLAIMS}
          title="Claims"
          handleCheckboxChange={(event) =>
            handleCheckboxChange(event, setClaimParticipants)
          }
        />
        <Checkbox
          list={DWELLINGS}
          title="Dwellings"
          handleCheckboxChange={(event) =>
            handleCheckboxChange(event, setDwellingParticipants)
          }
        />
        <Checkbox
          list={UNSCHEDULER_PP}
          title="Unscheduler"
          handleCheckboxChange={(event) =>
            handleCheckboxChange(event, setUnschedulerParticipants)
          }
        />
      </div>
    </div>
  );
}

チェックボックス.js

/* parses check box data from props.list element
 * @params {{title: string, handleCheckboxChange: Function, list:{name: string, id: number}[]}}
 */
const Checkbox = (props) => {
  // creates all the checkbox based on the list array.
  const checkbox = props.list.map((m) => (
    <span key={m.key}>
      <input type="checkbox" id={m.key} onClick={props.handleCheckboxChange} />
      {m.name}
    </span>
  ));

  return (
    <div>
      <div>{checkbox}</div>
      <div>{props.title}</div>
    </div>
  );
};

export default Checkbox;

[解決済み] Reactで複数のMaterial UIチェックボックスを処理する

質問

解決方法は？

関連

[解決済み] Reactルータを使ったプログラムによるナビゲーション

[解決済み] React JSX内のループ

[解決済み] Reactのこの3つの点は何をするところなのでしょうか？

[解決済み] React-routerのURLを更新したり、手動で書き込んだりするとうまくいかない

[解決済み] React NativeとReactの違いは何ですか？

[解決済み] Reactコンポーネントに条件付きで属性を追加するにはどうすればよいですか？

[解決済み] React jsのonClickはメソッドに値を渡すことができない

[解決済み] Reactで要素を表示・非表示にする

[解決済み] Reactコンポーネント外でのクリックを検出する

[解決済み] Reactのstateとpropsの違いとは？

最新

nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)

htmlページでギリシャ文字を使うには

ピュアhtml+cssでの要素読み込み効果

純粋なhtml + cssで五輪を実現するサンプルコード

ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード

タイピング効果を実現するピュアhtml+css

htmlの選択ボックスのプレースホルダー作成に関する質問

html css3 伸縮しない画像表示効果

トップナビゲーションバーメニュー作成用HTML+CSS

html+css 実装サイバーパンク風ボタン

おすすめ

[解決済み】パッシブイベントリスナー内部でpreventDefaultができない

[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。

[解決済み】JavaScriptで':'(コロン)は何をするのか？

[解決済み] jQueryで、ユーザーがそのフィールドを編集している間、テキストフィールドの最初の文字を大文字にするにはどうすればよいですか？

[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした

[解決済み】JavaScriptのisset()に相当するもの

[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)

[解決済み】JavaScriptのボタンonclickが機能しない

[解決済み] ローカルファイルを開くことができません - Chrome: ローカルリソースのロードが許可されていません

[解決済み】Uncaught ReferenceError。Firebase は定義されていません。