Question

我有一个<Day/>组件，该组件会在一天中呈现出充满时间的表格。

现在，我在<TableLayout/>中有一个handleChange函数，它正在侦听文本区域中的更改。

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);
  }

这是在Day中设置Child状态的部分。

   if (dayInfoInChild.hasOwnProperty(currentDate)) {
     setDayInfoInChild({
       ...dayInfoInChild,
         [currentDate]: {
           [eventNameFromChild]: textValueFromChild,
         },
     });
  }

但是现在我可以向对象添加一个按键，然后UI锁定：

那么如何使用挂钩创建从我的孩子到父母的凝聚力流？

Answer 1

通过了解您的问题，我建议您使用useContext

这里是一个可以帮助您解决此问题的链接。

https://vimalselvam.com/post/react-hooks-lift-up-pass-down-state-using-usecontext-and-usereducer/

React Hooks：无法将状态从子组件发送到父组件

1 个答案: