У меня есть компонент <Day/>, который отображает таблицу, полную раз в течение дня.
Прямо сейчас у меня есть функция handleChange в <TableLayout/>, который прослушивает изменения в текстовой области.
function TableLayout({ sendEventTargetToParent }) {
var [amountOfRows, setAmountOfRows] = useState(24);
var [textValue, setTextValue] = useState('');
var [eventName, setEventName] = useState('');
useEffect(() => {
sendDataToParent();
}, [eventName, textValue]);
function sendDataToParent() {
sendEventTargetToParent(eventName, textValue);
}
function handleChange(event) {
var { name, value } = event.target;
setEventName(name);
setTextValue(value);
}
Разметка:
<TextArea
rows={2}
name="textarea"
value={textValue}
onChange={(e) => handleChange(e)}
placeholder="Tell us more"
/>
Я хотел бы отправить эту информацию из текстовой области в компонент, который вы, вероятно, заметили, уже заметил, что реквизит TableLayout потребляет:
function TableLayout({ sendEventTargetToParent }) {
который, как я думал, относится к useEffect, поскольку он создает побочный эффект:
useEffect(() => {
sendDataToParent();
}, [eventName, textValue]);
function sendDataToParent() {
sendEventTargetToParent(eventName, textValue);
}
В любом случае Идея состоит в том, что когда эти локальные переменные / состояние изменяются в TableLayout, оно срабатывает до Day ...
export default function Day({ dayInfo }) {
var [dayInfoInChild, setDayInfoInChild] = useState({});
var [currentDate, setCurrentDate] = useState('');
var [timeOfDay, setTimeOfDay] = useState('');
var [eventNameFromChild, setEventNameFromChild] = useState('');
var [textValueFromChild, setTextValueFromChild] = useState('');
function getEventTargetFromChild(eventName, textValue) {
setEventNameFromChild(eventName);
setTextValueFromChild(textValue);
}
useEffect(() => {
if (dayInfo !== null) {
var modifiedDayInfo = dayInfo
.split(' ')
.map((item) => {
if (item.indexOf(',')) return item.replace(/,/g, '');
})
.join('-');
setCurrentDate(modifiedDayInfo);
if (localStorage.getItem(modifiedDayInfo)) {
var stringVersionOfModifiedDayInfo = modifiedDayInfo;
modifiedDayInfo = JSON.parse(localStorage.getItem(modifiedDayInfo));
if (!dayInfoInChild.hasOwnProperty(stringVersionOfModifiedDayInfo)) {
setDayInfoInChild({
...dayInfoInChild,
[stringVersionOfModifiedDayInfo]: modifiedDayInfo,
});
}
} else {
localStorage.setItem(modifiedDayInfo, JSON.stringify({}));
}
if (dayInfoInChild.hasOwnProperty(currentDate)) {
setDayInfoInChild({
...dayInfoInChild,
[currentDate]: {
[eventNameFromChild]: textValueFromChild,
},
});
}
}
}, []);
И код в Day's useEffect essentially creates an JSON object in localstorage with its key based on the date if needed if not it pulls that key and object converts it to a JS object and puts it into the state using useState`.
var [eventNameFromChild, setEventNameFromChild] = useState('');
var [textValueFromChild, setTextValueFromChild] = useState('');
function getEventTargetFromChild(eventName, textValue) {
setEventNameFromChild(eventName);
setTextValueFromChild(textValue);
}
это та часть, где состояние от Дочернего Дня устанавливается в День.
if (dayInfoInChild.hasOwnProperty(currentDate)) {
setDayInfoInChild({
...dayInfoInChild,
[currentDate]: {
[eventNameFromChild]: textValueFromChild,
},
});
}
Но сейчас я могу добавить один ход клавиши в объект, а затем пользовательский интерфейс блокируется:
Итак, как я могу создать связный поток от моего ребенка к родителю, используя крючки?