const [termData, setTermData] = useState<any[]>([]);
const [termComparison, setTermComparison] = useState<string[]>([]);
親コンポーネント
import Neko from './Neko';
const List = () => {
const [nekoName, setNekoName] = useState<string>('ロイヤルアナロスタン');
const [nekoEnt, setNekoEnt] = useState<any>({});
return (
<div>
<Neko nekoName={nekoName} setNekoName={setNekoName} nekoEnt={nekoEnt} setNekoEnt={setNekoEnt} />
子コンポーネント
import { useEffect, useState } from 'react';
import {Button, Input,} from 'antd';
const Neko = ({nekoName, setNekoName, nekoEnt, setNekoEnt}) => {
const [nekoBark, setNekoBark] = useState<string>('猫の吠え方');
//const [nekoEnt, setNekoEnt] = useState<any>({});//■■■□□□■■■□□□ useStateは親で適用しているので不要。
useEffect(() => {
setNekoBark('アオーアオー');
console.log('初期化イベント');//■■■□□□■■■□□□
}, []);
useEffect(() => {
console.log('他のコンポーネントでnekoEntが変更された時、発動するイベント');//■■■□□□■■■□□□
}, [nekoEnt]);
const testFunction = () => {
console.log(nekoName);//■■■□□□■■■□□□
};
const updateNekoEnt = (key, value) => {
const newEnt = {...nekoEnt, [key]: value};
setNekoEnt(newEnt); // 親のsetメソッドを用いて変更したエンティティをセットする。
nekoEnt[key] = value; // 推奨されていないがこの方法も可能■■■□□□■■■□□□
};
return (
<div>
<Button onClick={testFunction}>テスト猫が吠える</Button>
<Input
placeholder="Neko name"
value={nekoEnt.name}
onChange={(e) => updateNekoEnt('name', e.target.value)}
/>
</div>
);
};
export default Neko;
<div>
{termData.map((orData, index) => (
<div key={index}>
ハロー{index}
</div>
{index === termData.length - 1 ? (
<div>
<strong>ラスト行:</strong>
</div>
) : (
<div>中間行</div>
)}
))}
</div>
{animalData.filter(row => row.inUseAnimal === 1).map((row, index) => (
<tr key={`key-${index}`}>
<td>{row.id}</td>
<td>{row.customTagId}</td>
</tr>
))}
const testFunction = () => {
console.log('はろーわーるど');
};
<Button onClick={testFunction}>テスト猫ボタン</Button>
// リスト内のキーをキャメル記法からスネーク記法に変換する
const convKeyCamelToSnake = (list) => {
const newList = {};
for(let key in list){
const snakeKey = key.replace(/([A-Z])/g, '_$1').toLowerCase();
console.log(`Converting ${key} to ${snakeKey}`);
newList[snakeKey] = list[key];
}
return newList;
};
import DatePickerEx from './DatePickerEx';
～略～
const updateDatePickerEx = (value) => {
// 入力日付のvalueをデータへ反映する処理
}
～略～
<div style={{display:friendAddDateDisplay}}>
<DatePickerEx
dateValue={animalDate}
updateDatePickerEx={updateDatePickerEx}
/>
</div>
import { useEffect, useState } from 'react';
import {DatePicker ,} from 'antd';
import moment, { Moment } from 'moment';
interface DatePickerExProps {
dateValue: string;
updateDatePickerEx: (dateString: string) => void;
}
const DatePickerEx = ({ dateValue, updateDatePickerEx }: DatePickerExProps) => {
const [date, setDate] = useState<Moment | null>(null);
useEffect(() => {
// dateValue が日付として有効な場合に moment オブジェクトに変換
if (moment(dateValue, 'YYYY-MM-DD', true).isValid()) {
setDate(moment(dateValue, 'YYYY-MM-DD'));
} else {
setDate(null); // 無効な日付の場合は null をセット
}
}, [dateValue]);
const handleDateChange = (date: Moment | null, dateString: string) => {
setDate(date);
updateDatePickerEx(dateString);
};
return (
<div>
<DatePicker
value={date}
onChange={handleDateChange}
format="YYYY-MM-DD"
/>
</div>
);
};
export default DatePickerEx;
{and_index === termData.length - 1 ? (
<div>
イワシ
</div>
) : (
<div>
サバ
</div>
)}
const nowDatetime = formatDate(new Date()); // 現在の日時を取得する
～略～
const formatDate = (date: Date): string => {
const padZero = (num: number) => num.toString().padStart(2, '0');
return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())} ${padZero(date.getHours())}:${padZero(date.getMinutes())}:${padZero(date.getSeconds())}`;
};
{termData.map((termEnt, index) => (
<div key={index} >
</div>
))}
import {Link,} from 'react-router-dom';
import {Button,} from 'antd';
～ 略 ～
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => {
// ボタンクリック時の処理（ここでは特に何もしない）
}}
style={{ marginRight: '10px' }}
>
<Link to={`/custom_tag_term/list`}>
カスタムタグ作成
</Link>
</Button>