ReactJS-仅在输入字段已更新的情况下，在Blur上运行useEffect

如何解决ReactJS-仅在输入字段已更新的情况下，在Blur上运行useEffect

任务是仅在输入被更新和模糊时才发送分析数据。 本地而言，这可以通过使用onchange事件来实现，该事件仅在输入被更新且失去焦点时才触发该事件。

React的工作方式有所不同，因此onChange会在每次输入更改时触发。 React是否为此提供任何现成的解决方案？

代码非常简单：

const App = () => {
    const [ name,setName ] = useState( '' );

    useEffect( () => {
        /**
         * Run this function only on Update + Blur.
         * This will contain the logic to send analytics.
         */
    } );

    return (
        <input type="text" value={ name } onChange={ ( e ) => setName( e.target.value ) } />
    );
};

解决方法

好的，我认为，这应该可以满足您的需求。您要做的是在输入之前先临时记录输入内容，然后在且仅当输入值发生变化时，在输入模糊时对其进行更新。您可以使用ref来做到这一点，就像这样：

const App = () => {
    const transientName = useRef('');
    const [ name,setName ] = useState( '' );

    const handleBlur = () => {
        // This will only trigger if they blur AND the name has changed
        if (transientName.current !== name) {
            // Update the transient name value
            transientName.current = name;

            // Do other on blur analytics stuff
        }
    };

    return (
        <input type="text" value={ name } onChange={ ( e ) => setName( e.target.value ) } onBlur={handleBlur} />
    );
};

这样，如果他们更改输入并进行模糊处理，则会触发，但是如果他们在不更改输入值的情况下对输入进行模糊处理，则不应在if条件内的模糊代码上触发您的自定义

,

这类似于componentDidUpdate

function YourComponent({ someProp }) {
useEffect(() => {
// code to run when someProp changes
},[someProp]);
}

这意味着只要您更改指定的道具或状态，它就会更新，在您的情况下，我会这样做：

const App = () => {
    const [ name,setName ] = useState( '' );

    useEffect( () => {
        /**
         * Run this function only on Update + Blur.
         * This will contain the logic to send analytics.
         */
    },[name] );

    return (
        <input type="text" value={ name } onChange={ ( e ) => setName( e.target.value ) } />
    );
};

这将在您更新名称值时触发您指定的功能。