useRefref.current未定義作為prop并通過背景關系傳遞

嘗試將 ref 從一個組件傳遞到另一個組件，并且只嘗試控制臺記錄 ref.current 屬性，并且它不斷出現未定義。我已經嘗試過這個問題的解決方案，但它仍然未定義。

我只想在 SearchBar 組件中觸發事件后更新 Header 組件中元素的類。所以我將 ref 傳遞給 SearchBar

Header 是 ref 的來源并被傳遞給 SearchBar 組件。

我試圖將它作為道具從 Header 傳遞到 SearchBar，現在我試圖通過包含 ref 的狀態傳遞它。我已經控制臺通過傳遞的道具和 state.current 屬性記錄了 logo.current 并且都回傳未定義。

import React, { useContext, useEffect, useRef } from "react";
import SearchContext from "../contexts/SearchStore";
import SearchBar from "./SearchBar";

const Header = () => {
  const { setRefState, refState } = useContext(SearchContext);
  const logo = useRef();

  useEffect(() => {
    setRefState(logo.current);
  }, [logo.current])

  return (
    <section id="headerContainer" className="d-grid">
      <h2
        ref={logo}
        className="ui header d-flex align-items-center justify-content-center mb-0 headerLogo"
      >
        <div className="content headerFont fs-3 ps-0">WhatSong.</div>
        <i className="play circle icon fs-5"></i>
      </h2>
      <div id="header2" className="d-flex align-items-center flex-row-reverse">
        <SearchBar logo={logo} />
      </div>
    </section>
  );
};

export default Header;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React, { useEffect, useContext } from "react";
import SearchContext from "../contexts/SearchStore";
import "../styles/body.css";

const SearchBar = (logo) => {
  const {
    term,
    setTerm,
    submittedTerm,
    setSubmittedTerm,
    refState,
  } = useContext(SearchContext);

  const styleLogo = () => {
    console.log(refState.current);
    console.log(logo.current)
  };
  
    return (
    <div id="searchContainer" className="w-50 d-flex justify-content-end">
      <form
        onSubmit={(e) => {
          e.preventDefault();
          setSubmittedTerm(term);
        }}
        className="ui left icon input w-50"
      >
        <i className="inverted circular search link icon"></i>
        <input
          value={term}
          type="text"
          placeholder="Search..."
          data-dashlane-rid="3640789f2356683f"
          data-form-type=""
          className="searchInput"
          onChange={({ target }) => setTerm(target.value)}
          onm ouseEnter={styleLogo}
          onm ouseLeave={styleLogo}
          onFocus={styleLogo}
          onBlur={styleLogo}
        />
      </form>
    </div>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

uj5u.com熱心網友回復：

您需要logo正確接收：

const SearchBar = ({logo}) => {
  const {
    term,
    setTerm,
    submittedTerm,
    setSubmittedTerm,
    refState,
  } = useContext(SearchContext);

  const styleLogo = () => {
    console.log(refState.current);
    console.log(logo.current)
  };
  
    return (
    <div id="searchContainer" className="w-50 d-flex justify-content-end">
      <form
        onSubmit={(e) => {
          e.preventDefault();
          setSubmittedTerm(term);
        }}
        className="ui left icon input w-50"
      >
        <i className="inverted circular search link icon"></i>
        <input
          value={term}
          type="text"
          placeholder="Search..."
          data-dashlane-rid="3640789f2356683f"
          data-form-type=""
          className="searchInput"
          onChange={({ target }) => setTerm(target.value)}
          onm ouseEnter={styleLogo}
          onm ouseLeave={styleLogo}
          onFocus={styleLogo}
          onBlur={styleLogo}
        />
      </form>
    </div>
  );
};

標籤：javascript 反应

上一篇：在Angular應用程式中使用帶有命名空間的javaScript庫

下一篇：如何在一個函式中有多個addeventlistener