ReactJS - 仅当输入字段更新时才在 Blur 上运行 useEffect

Question

任务是仅在输入更新和模糊时才发送分析数据。 在本机上，这可以通过使用 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 ) } />
    );
};

Answer 1

好的，我认为这应该可以满足您的需求。您想要做的是在他们开始输入之前保留他们输入的临时记录，然后在他们模糊时更新它，如果且仅当该输入值已更改。你可以用一个 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 条件内的自定义模糊代码

Answer 2

这类似于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 ) } />
    );
};

每当您的名称值更新时，这将触发您指定的函数。