标签: use-ref

I am using React.useRef inside a react functional component, I am getting an error message before i was using it inside a class component and now i have changed it to a react functional component and I am still getting this error message below.

React Hook "React.useRef" is called in function "landingPage" which is neither a React function component or a custom React Hook function

Could you please explain why am i still getting this message after placing in a …

我正在尝试将 Relax.js 与 React 一起使用，但无法理解如何使用它。我能找到的只是https://www.npmjs.com/package/rellax#target-node。在那个链接中，他们给出了这个代码。

<div ref={ref => { this.rellaxRef = ref }}>
  I’m that default chill speed of "-2"
</div>

var rellax = new Rellax(this.rellaxRef)

我如何使用带有 React 钩子的代码以及整个组件会是什么样子。这是组件的一个非常狭窄的视图。

我使用 Material-UI 和 React，有如下组件：

const UserDetail = (props: ListDetailProps) => {
    const oldpassword = useRef<TextFieldProps>(null);
    const newpassword = useRef<TextFieldProps>(null);
    const againpassword = useRef<TextFieldProps>(null);
    const handlePasswordChange = async () => {
        console.log(newpassword.current?.value)    //expect the password value but undefined get
        console.log(againpassword.current?.value)  //expect the password value but undefined get
    }
    return (<>
        <p>old password: <TextField ref={oldpassword} label="old password" type="password" /></p>
        <p>new password: <TextField ref={newpassword} label="new password" type="password" /></p>
        <p>new password: <TextField ref={againpassword} label="new password again" type="password" /></p>
        <button onClick={handlePasswordChange}>submit</button>
    </>
    )
}

我想获取 …

我试图理解 React 中的 useRef 钩子。

我在 React 中创建了一个简单的时间。其代码如下。

import { useRef, useState, useEffect } from 'react';

function Parent() {
  const [count,setCount]=useState(5);
  const ref=useRef(0);
//let hold=0;
  const countdown=()=>{
      ref.current=setInterval(()=>{
        // console.log('ref.current-->',ref.current);
        setCount((c)=>c-1)
       
      },1000)
  }
  useEffect(()=>{
    if(count<1)
        clearInterval(ref.current)
  },[count])
  
  return(
      <>
      <h3>Timer : {count}</h3>
      <br/>
      <button onClick={countdown}>countdown</button>
    </>
  )
}

export default Parent;

在这里，我使用钩子创建了一个引用，并且正在监视计数状态。当它达到 0 时，我将调用“clearInteval”函数来清除计时器。

这段代码工作正常。

但是，当我尝试使用普通变量而不是由挂钩创建的变量执行相同操作时，间隔不会被清除。

请在下面找到相同的代码。

import { useRef, useState, useEffect } from 'react';

function Parent() {
  const [count,setCount]=useState(5);
  const ref=useRef(0);
let hold=0;
  const countdown=()=>{
    hold=setInterval(()=>{
        // console.log('ref.current-->',ref.current);
        setCount((c)=>c-1) …

我目前陷入了有关 ref 对象类型的打字稿错误（据我所知）。我对打字稿很陌生，所以我不明白如何解决这个问题！

我已附加了给我的 Tootip 打字稿，以及它在构建阶段引发的错误。此外，我使用react- Three-drei和react- Three-Fiber库来合成 Three.js 对象

这是抛出的错误：

src/components/models/web/Plane.tsx:120:22 - error TS2322: Type 'MutableRefObject<OrbitControlsProps | undefined>' is not assignable to type 'Ref<OrbitControls> | undefined'.
  Type 'MutableRefObject<OrbitControlsProps | undefined>' is not assignable to type 'RefObject<OrbitControls>'.
    Types of property 'current' are incompatible.
      Type 'OrbitControlsProps | undefined' is not assignable to type 'OrbitControls | null'.
        Type 'undefined' is not assignable to type 'OrbitControls | null'.

120       <OrbitControls ref={cameraRef} />
                         ~~~

  node_modules/@types/react/index.d.ts:134:9
    134         ref?: Ref<T> | undefined;
                ~~~
    The expected type …

我正在尝试使用 React useRef 挂钩打开文件对话框。

当浏览器执行 fileInputRef.current.click() 代码片段时，我在控制台中收到以下错误

错误：文件选择器对话框只能在用户激活时显示

这是我的反应钩子代码：

function Simple(){
    var [st,set_st]=React.useState(0)
    var el=React.useRef(null)
    if (st<1)
        set_st(st+1)//to force an extra render for a grand total of 2
    console.log('el.current',el.current,'st',st)
    return <div ref={el}>simple</div>
}
ReactDOM.render(<Simple />,document.querySelector('#root') );

我认为它应该渲染两次。第一次 el.current 应该为 null，第二次应该指向 div 的 DOM 对象。运行它时，这是输出

el.current null st 0
el.current null st 1

是的，它确实渲染了两次。但是，第二次渲染 el.current 仍然为空。为什么？

解决方案：如下 Gireesh Kudipudi 所描述。我添加了useEffect

function Simple(){
    var [st,set_st]=React.useState(0)
    var el=React.useRef(null)
    if (st<1)
        set_st(st+1)//to force an extra render for a grand total of 2
    console.log('el.current',el.current,'st',st)
    React.useEffect(_=>console.log('el.current',el.current,'st',st)) //this prints out the el.current correctly
    return <div …

每当按下键盘上的下一个按钮时，我都会尝试将注意力集中在下一个输入字段上。

从 React Native 文档中我了解到我们需要使用 useRef 钩子。但是按照文件

TypeError: null is not an object (evaluating 'filed2.current.focus')

我正在使用所有软件包的最新版本，以及带有打字稿模板的新反应本机应用程序。

这是我到目前为止所拥有的代码：

import React, {useRef} from 'react';

...

  const filed1 = useRef(null);
  const filed2 = useRef(null);

  const onButtonClick = () => {
    filed2.current.focus();
  };

  return (
    <>
      <FormInputPassword
        ref={filed1}
        returnKeyType="next"
        onSubmitEditing={onButtonClick}
        blurOnSubmit={false}
      />
      <FormInputPassword
        ref={filed2}
        returnKeyType="done"
        blurOnSubmit={false}
      />
    </ >
  );

编辑：

function FormInputPassword(props) {
  return (
      <FormInputView>
        <Input {...props} />
      </FormInputView>
  );
}


FormInputPassword.defaultProps = {
  blurOnSubmit: true,
  autoCorrect: false,
  editable: true,
};

正如您在图像中看到的，滚动条位于中间。现在，当转到一个组织时，我希望滚动条上升到其起始位置。

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);
const ListItemScroll = (props) => {
  let {
    resultList,
    indexChange,
    radioValue,
    radioHandleChange,
    setParamsInc,
    searchText,
    loading,
    noRecords
  } = props;
  const listInnerRef = useRef();

  const onScroll = () => {
    if (searchText.length === 0) {
      if (listInnerRef.current) {
        const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current;
        if (scrollTop + clientHeight === scrollHeight) {
          setParamsInc((prev) => prev + 1);
        }
      }
    }
  };

这就是我正在尝试做的事情，但它不起作用

  const executeScroll = () => scrollToRef(listInnerRef);
  useEffect(() => {
    console.log("scroll"); …

我想获取动态 div 绘制后的宽度，但我不知道如何实现。这就是我正在做的：

const ref=useRef();
useEffect(()=>{
console.log('REF',ref.current.offSetWidth)
},[])



return (
<div ref={ref}>


</div>

我尝试了 window.resize eventListener，但只有在屏幕尺寸发生变化时才会触发它。我的问题是，在屏幕上渲染后，是否可以获取 div 的宽度？我没有预先设置宽度，它只是在弹性框中占据父元素的 100%