Javascript 如何将scrollIntoView（）函数添加到React中的按钮？

我正在尝试在React中使用scrollIntoView（）JavaScript函数。我知道我编写的函数可以工作，因为我可以在加载页面时（通过使用useeffett（）钩子）使滚动函数在默认情况下工作。但是，当我单击按钮时，我无法使相同的函数工作

这是我的职能（有效）：

这是我的按钮（似乎不起作用）：

{/*滚动功能的按钮*/}
scrollSmoothHandler（myRef）}
className=“scroll”>
卷轴

}

这是查看上下文的整个组件：

import React, { useRef, useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { Link } from 'react-router-dom'
import ReactPlayer from 'react-player'

import { IntroNav } from './IntroNav'
import { Footer } from './Footer'

import './intro.css'

export const Intro = () => {
  const history = useHistory() 

{/* THE SCROLL FUNCTION */}  
const myRef = useRef(null);

const scrollSmoothHandler = () => {
  myRef.current.scrollIntoView({ behavior: "smooth" });
};

useEffect(() => {
  scrollSmoothHandler(myRef)
}, [])

return (
  <>
    <IntroNav/> 
    <section className="introContainer">
      <button className="joinLink">  
        <Link to="/signup" className="joinLink">JOIN US</Link>  
      </button>  
    <ReactPlayer 
      url='https://res.cloudinary.com/projectyoga/video/upload/v1584311023/projectyoga/video/mixkit-upward-and-downward-facing-dog-892_jjbuom.mp4'
      playing
      width="100%"
      height="100%" 
      loop={true}
      style={{filter: "opacity(0.5)"}}
    /> 
    <span className="introLoginMember">
      <p className="introLogIn"> Already a member</p>
      <button className="introLogInLink">
        <Link to="/login">
          <p>LOG IN HERE</p>
        </Link>
      </button>
    </span>  
    {/* THE BUTTON FOR THE SCROLL FUNCTION */}
    <button 
      type="button"
      onclick={() => scrollSmoothHandler()} 
      className="scroll">
      <p>SCROLL</p>
    </button>
    <span ref={myRef}>
      <Footer/>
    </span>}  
    </section> 
  </> 
  )
}

import React，{useRef，useffect，useState}来自“React”
从“react router dom”导入{useHistory}
从“react router dom”导入{Link}
从“react player”导入react player
从“./IntroNav”导入{IntroNav}
从“/Footer”导入{Footer}
导入“./intro.css”
导出常量简介=（）=>{
const history=useHistory（）
{/*滚动函数*/}
const myRef=useRef（null）；
常量scrollSmoothHandler=（）=>{
myRef.current.scrollIntoView（{behavior:“smooth”}）；
};
useffect（（）=>{
scrollSmoothHandler（myRef）
}, [])
返回(
加入我们
已成为会员
在这里登录

{/*滚动功能的按钮*/}
scrollSmoothHandler（）}
className=“scroll”>
卷轴

}  
)
}
如果没有完整的上下文，很难提供解决方案，但我认为您的
useffect
钩子用法非常模糊，可能没有必要。它应该观察什么道具并产生副作用

查看完整的代码片段，是否有可能您对
onClick
处理程序进行了键入？在jsx中，调用scrollSmoothHandler（myRef）的应该是
onClick
而不是
onClick
但是在定义中，你没有提到使用全局myref变量的arg myref。你也可以添加整个react组件片段吗？谢谢，你能再解释一下吗？：）在女巫定义中，我需要提到myref吗？当你说你不能让它工作时，你的确切意思是什么。你有错误吗。或者它不会滚动。在任何情况下，也只需检查是否有可滚动的范围。可能只是当您单击按钮时，跨度已经在视图中，参数不会导致您看到的问题。但是@orangespark是对的，您可以只使用
onclick={（）=>scrollSmoothHandler（）}
（或者
onclick={scrollSmoothHandler}
），它会做完全相同的事情。或者，您可以将函数声明更改为
constScrollSmoothHandler=（myRef）=>{
，它仍然可以做…完全相同的事情。不过，做一个或另一个可能是一个好主意，只是为了使您的代码更加一致。constScrollSmoothHandler=（）=>{myRef.current.scrollIntoView（{behavior:“smooth”}）；}；如果您引用全局函数，则可以删除您在函数调用中传递的myref。useEffect主要用于检查函数是否正常工作以及是否正常工作。：）
    {/* THE BUTTON FOR THE SCROLL FUNCTION */}
    <button 
      type="button"
      onclick={() => scrollSmoothHandler(myRef)} 
      className="scroll">
      <p>SCROLL</p>
    </button>
    <span ref={myRef}>
      <Footer/>
    </span>}

import React, { useRef, useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { Link } from 'react-router-dom'
import ReactPlayer from 'react-player'

import { IntroNav } from './IntroNav'
import { Footer } from './Footer'

import './intro.css'

export const Intro = () => {
  const history = useHistory() 

{/* THE SCROLL FUNCTION */}  
const myRef = useRef(null);

const scrollSmoothHandler = () => {
  myRef.current.scrollIntoView({ behavior: "smooth" });
};

useEffect(() => {
  scrollSmoothHandler(myRef)
}, [])

return (
  <>
    <IntroNav/> 
    <section className="introContainer">
      <button className="joinLink">  
        <Link to="/signup" className="joinLink">JOIN US</Link>  
      </button>  
    <ReactPlayer 
      url='https://res.cloudinary.com/projectyoga/video/upload/v1584311023/projectyoga/video/mixkit-upward-and-downward-facing-dog-892_jjbuom.mp4'
      playing
      width="100%"
      height="100%" 
      loop={true}
      style={{filter: "opacity(0.5)"}}
    /> 
    <span className="introLoginMember">
      <p className="introLogIn"> Already a member</p>
      <button className="introLogInLink">
        <Link to="/login">
          <p>LOG IN HERE</p>
        </Link>
      </button>
    </span>  
    {/* THE BUTTON FOR THE SCROLL FUNCTION */}
    <button 
      type="button"
      onclick={() => scrollSmoothHandler()} 
      className="scroll">
      <p>SCROLL</p>
    </button>
    <span ref={myRef}>
      <Footer/>
    </span>}  
    </section> 
  </> 
  )
}