我有一个<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 useState`中的代码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。
var [eventNameFromChild, setEventNameFromChild] = useState('');
var [textValueFromChild, setTextValueFromChild] = useState('');
function getEventTargetFromChild(eventName, textValue) {
setEventNameFromChild(eventName);
setTextValueFromChild(textValue);
}
这是在 Day 中设置来自 Child 的状态的部分。
if (dayInfoInChild.hasOwnProperty(currentDate)) {
setDayInfoInChild({
...dayInfoInChild,
[currentDate]: {
[eventNameFromChild]: textValueFromChild,
},
});
}
但是现在我可以在对象中添加一个按键，然后 UI 锁定：
那么如何使用钩子创建从子级到父级的有凝聚力的流程？