标签: use-ref

我正在尝试创建一个导航栏，当用户单击其中一个链接时，页面会滚动到某个部分。在上面的代码中，每个元素都是我页面的一部分：

    <Navbar scrollFunc={scrollToRef} />      
    <Mainlogo ref={mainLogoRef} />
    <Sales  ref={salesRef} />
    <Introduction ref={introductionRef} />
    <Blog ref={blogRef} />
    <Footer />

'refs' 被声明如下，使用 useRef 钩子：

  const mainLogoRef = useRef(null)
  const salesRef = useRef(null)
  const introductionRef = useRef(null)
  const blogRef = useRef(null)

我用来滚动的功能如下：

  const scrollToRef = ref => {
    window.scrollTo({ top: ref.current.offsetTop, behavior: "smooth" })
  }

问题是“当前”键始终未定义。当我做这样的事情时：

<div ref={salesRef}> <Sales  /><div>

或者

<section ref={salesRef}> <Sales  /><section>

一切正常。我假设 'ref' 仅适用于 html 'pure' 标签。有没有办法在自定义组件中使用“useRef”钩子？

免责声明：对不起，英语不好，我不是母语人士。

美好的一天，所以我试图在表单操作=“POST”发生之前执行中间功能。我首先尝试了两件事 onSubmit={functionName} 但表单始终执行该操作，即使在 onSubmit 函数中我返回 false。其次，我一直在尝试使用 useRef 来以编程方式分派提交事件，但没有任何反应？我本质上必须进行服务器端调用来获取发布的表单值的配置，不幸的是我使用的外部 API 需要以这种方式提交表单。请提供任何帮助，我们将不胜感激。

尝试1：

const performSubmit =() => {
 //Using onSubmit and then only performing the return after the axios call is done
 axiosCallFunction.then((res) => {
   setConfig(res.data)
   return true
 }).catch((error)) => {
   //Dont submit form
   return false
 })
}

return (
<form name="form" onSubmit={performSubmit} id="x1" method="POST" action="https://url.aspx" target="_top">
    <input value={config.param}/>
    <button type="submit"> Submit</button>
</form>)

尝试2

const formEl = useRef();

const performSubmit =() => {
 //Currently not calling the submit on the form
 formEl.current.dispatchEvent(new …

我对下面使用 useRef 存储以前的状态值感到困惑。本质上，它如何能够正确显示先前的值。由于 useEffect 依赖于“value”，我的理解是每次“value”更改（即当用户更新文本框时），它会将“prevValue.current”更新为新输入的值。

但这似乎不是正在发生的事情。在这种情况下，步骤的顺序是什么？

function App() {
  const [value, setValue] =  useState("");
  const prevValue = useRef('')
  useEffect(() => {
    prevValue.current = value;
  }, [value]);
  return (
    <div>
      <input
        value={value}
        onChange={e => setValue(e.target.value)}
      />
      <div>
        Curr Value: {value}
      </div>
      <div>
        Prev Value: {prevValue.current}
      </div>
    </div>
  );
}

我正在使用react-slick-slider，我想要实现的是制作自定义箭头。
所以代码看起来像这样：

const FeedbackSlider = () => {
const [isLargeScreen] = useMediaQuery("(min-width: 1050px)")

const sliderRef = useRef<Slider>()

const prev = () => {
    sliderRef.current?.slickPrev()
}
const next = () => {
    sliderRef.current?.slickNext()
}
const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: (isLargeScreen ? 2 : 1),
    slidesToScroll: 1,
    prevArrow: (isLargeScreen && <PrevArrow />),
    nextArrow: (isLargeScreen && <NextArrow />)
};
return (
    <Box px={['2', '4', '8', '16']} mx='auto' pt='12'>
        <Slider ref={sliderRef} {...settings}>
           // slider cards...
        </Slider>
        {!isLargeScreen && …

在我们的反应应用程序中，我们有父子组件。子组件调用父方法来更新父状态值。这是示例代码

//父组件

const parent = ({ items }) => {
    const [information, setInformation] = useState([]);
    const updateParentInformation = (childUpdate) => {
         setInformation(information + childUpdates)
    }
    return (
        <div>
            <div>{information}</div>
            ...
            {items.map((item) => {
                return (
                    <ChildComponent item={item} updateParentInformation={updateParentInformation} />
            )})}
        </div>
    )
}

//子组件

const ChildComponent = ({ item, updateParentInformation }) => {
    useEffect(() => {
        const cardInformation = calculateCardInformation(item)
        updateParentInformation(cardAmpScripts)
     }, [item])
    return (
        <div>
            .....
        </div>
    )
}

因此子组件调用父组件的 updateParentInformation 函数来更新父组件的状态，从而重新渲染父组件。我在这里有几个问题

1. 在某些情况下，我们可能有100-150个子组件，在这种情况下我们的父母会重新渲染很多，如何避免这种情况。我们可以通过这段代码来避免这种情况

   ....
    let recievedUpdates = 0
    const …

   Run Code Online (Sandbox Code Playgroud)

我有一个应用程序，可以从 GraphQL 数据库中提取数据，然后将其映射到自定义表单组件（数量文本框）中。现在，组件本身保存着各自数量的状态，但我需要能够从父级访问这些值，以便我可以使用应用程序中其他地方的输入来更改数量。我已经查看了这是如何完成的，我认为这可能是我需要的，但我不知道如何应用它：[How to target DOM with React useRef in map][1]

我的应用程序由一个父元素和一个包含输入的顶部栏、一个模态组件以及从 GraphQL 查询填充的元素映射组成。

export default function Home() {
  const [batch, setBatch] = useState([]);
  const [target, setTarget] = useState("");
  const [batchCount, setBatchCount] = useState(0);
  const [cartModalStatus, setCartModalStatus] = useState(false);

  const elementValues = useRef([]);
  const fetcher = query => request("https://data.objkt.com/v2/graphql", query);
  const { data, error } = useSWR(
  `{
    listing(where: {token: {creators: {creator_address: {_eq: ` + target + `}}, supply: {_gt: "0"}}, status: {_eq: "active"}}, order_by: {token: {timestamp: asc}, price: asc}) …