react ダイアログ

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import MyTableDialog from './MyTableDialog';

const ParentComponent = () => {
  const [isDialogVisible, setIsDialogVisible] = useState(false);
  const [valueToPass, setValueToPass] = useState('この値を渡す');

  const openDialog = () => {
    setIsDialogVisible(true);
  }

  const closeDialog = () => {
    setIsDialogVisible(false);
  }

  return (
    <div>
      <Link to={{ pathname: '/dialog', state: { value: valueToPass } }}>ダイアログを開く</Link>
      <MyTableDialog showDialog={isDialogVisible} onClose={closeDialog} valueToPass={valueToPass} />
    </div>
  );
};

export default ParentComponent;







import React from 'react';
import { useLocation } from 'react-router-dom';

const MyTableDialog = () => {
  // useLocationフックを使用してlocationオブジェクトを取得
  const location = useLocation();
  
  // location.state.valueから値を読み取る
  const valueToUse = location.state.value;

  return (
    <div>
      <p>ダイアログ内の値: {valueToUse}</p>
      {/* ダイアログ内で値を使用 */}
    </div>
  );
};

export default MyTableDialog;



import React, { useState, useEffect } from 'react';
import { Checkbox, Dropdown } from '@fluentui/react';
import { useLocation } from 'react-router-dom';

function App() {
  const [isChecked, setIsChecked] = useState(false);
  const location = useLocation();

  // URLパラメーターから初期値を設定
  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const paramValue = params.get('yourParameterName');

    if (paramValue === 'true') {
      setIsChecked(false); // 逆に設定する例
    }
  }, [location.search]);

  // ... 以前のコンポーネントコード

  return (
    <div>
      <Checkbox label="切り替え" checked={isChecked} onChange={handleCheckboxChange} />
      <Dropdown label="選択してください" options={isChecked ? options2 : options1} />
    </div>
  );
}

export default App;






import React, { useState } from 'react';
import { Checkbox, Dropdown } from '@fluentui/react';

function App() {
  const [isChecked, setIsChecked] = useState(false);
  const options1 = [
    { key: 'A', text: 'Option A' },
    { key: 'B', text: 'Option B' },
  ];
  const options2 = [
    { key: 'C', text: 'Option C' },
    { key: 'D', text: 'Option D' },
  ];

  const handleCheckboxChange = (event, isChecked) => {
    setIsChecked(isChecked);
  };

  return (
    <div>
      <Checkbox label="切り替え" checked={isChecked} onChange={handleCheckboxChange} />
      <Dropdown label="選択してください" options={isChecked ? options2 : options1} />
    </div>
  );
}

export default App;