Question

我最近想设计一个带有react钩子的输入组件。该组件将在0.5秒内输入输入后检查验证。

我的代码

const inputField = ({ name, type, hint, inputValue, setInput }) => {

    // if there is default value, set default value to state
    const [value, setValue] = useState(inputValue);

    // all of validation are true for testing
    const validCheck = () => true;

   let timeout;

    const handleChange = e => {
        clearTimeout(timeout);
        const v = e.target.value;

        setValue(v);

        timeout = setTimeout(() => {
            // if valid
            if (validCheck()) {
               // do something...
            }
        }, 500);
    };

    return (
        <SCinputField>
            <input type={type} onChange={handleChange} />
       </SCinputField>
    );
};

不幸的是，它不起作用，因为超时变量会在setValue之后每次更新。

我发现react-hooks提供了诸如useRef之类的功能来存储变量。

在这种情况下我应该使用它还是不应该使用react-hooks？

更新

添加useEffect

const inputField = ({ name, type, hint, inputValue, setInput }) => {

    // if there is default value, set default value to state
    const [value, setValue] = useState(inputValue);

    // all of validation are true for testing
    const validCheck = () => true;

   let timeout;

    const handleChange = e => {
        const v = e.target.value;

        setValue(v);
    };

    // handle timeout
    useEffect(() => {
        let timeout;

        if (inputValue !== value) {
            timeout = setTimeout(() => {
                const valid = validCheck(value);
                console.log('fire after a moment');

                setInput({
                    key: name,
                    valid,
                    value
                });
            }, 1000);
        }

        return () => {
            clearTimeout(timeout);
        };
    });


    return (
        <SCinputField>
            <input type={type} onChange={handleChange} />
       </SCinputField>
    );
};

看起来不错，但是我不确定这是正确的使用方式。

Answer 1

您无需保留对渲染之间超时的引用。您只需从useEffect返回一个函数即可清除它：

React.useEffect(() => {
  const timeout = setTimeout(()=> {
    if (value !== '') {
      validate();
    }
  }, 500);

  return () => {
    clearTimeout(timeout);  // this guarantees to run right before the next effect
  }
},[value, validate]);

此外，不要忘记将所有依赖项传递给效果，包括validate函数。

理想情况下，您可以将value作为参数传递给validate函数：validate(value)-这样，该函数具有较少的依赖关系，甚至可以是纯函数，并且可以移到组件之外。

或者，如果您具有内部依赖项（例如另一个setState或来自onError的{{1}}回调），请使用props钩子创建validate函数：

useCallback()

如果依存关系不变，这将在渲染器之间保留相同的功能引用。

Answer 2

这是我要怎么做：

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

function InputField() {

  const [value, setValue] = useState('');       // STATE FOR THE INPUT VALUE
  const timeoutRef = useRef(null);              // REF TO KEEP TRACK OF THE TIMEOUT

  function validate() {                         // VALIDATE FUNCTION
    console.log('Validating after 500ms...');
  }

  useEffect(() => {                             // EFFECT TO RUN AFTER CHANGE IN VALUE
    if (timeoutRef.current !== null) {          // IF THERE'S A RUNNING TIMEOUT
      clearTimeout(timeoutRef.current);         // THEN, CANCEL IT
    }

    timeoutRef.current = setTimeout(()=> {      // SET A TIMEOUT
      timeoutRef.current = null;                // RESET REF TO NULL WHEN IT RUNS
      value !== '' ? validate() : null;         // VALIDATE ANY NON-EMPTY VALUE
    },500);                                     // AFTER 500ms
  },[value]);                                   // RUN EFFECT AFTER CHANGE IN VALUE

  return(                                       // SIMPLE TEXT INPUT
    <input type='text' 
      value={value} 
      onChange={(e) => setValue(e.target.value)}
    />
  );

}

以下片段上的工作示例：

function InputField() {

  const [value, setValue] = React.useState('');
  const timeoutRef = React.useRef(null);

  function validate() {
    console.log('Validating after 500ms...');
  }

  React.useEffect(() => {
    if (timeoutRef.current !== null) {
      clearTimeout(timeoutRef.current);
    }
     
    timeoutRef.current = setTimeout(()=> {
      timeoutRef.current = null;
      value !== '' ? validate() : null;
    },500);
  },[value]);
  
  return(
    <input type='text' value={value} onChange={(e) => setValue(e.target.value)}/>
  );
  
}

ReactDOM.render(<InputField/>, document.getElementById('root'));

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

Answer 3

您可以移动超时变量内部 handleChange 方法。

const inputField = ({ name, type, hint, inputValue, setInput }) => {

// if there is default value, set default value to state
const [value, setValue] = useState(inputValue);

// all of validation are true for testing
const validCheck = () => true;

const handleChange = e => {


    let timeout;
    clearTimeout(timeout);
    const v = e.target.value;

    setValue(v);

    timeout = setTimeout(() => {
        // if valid
        if (validCheck()) {
           // do something...
        }
    }, 500);
};

return (
    <SCinputField>
        <input type={type} onChange={handleChange} />
   </SCinputField>
);

};

在setState

3 个答案: