如何去抖动受控输入？

IT技术 javascript reactjs lodash
2021-05-22 16:11:19

我目前正在努力应对react输入并从 lodash 中去抖动。大多数情况下，当我有一个表单时，我也有一个编辑选项，所以我需要一个受控组件来填充输入，value={state["targetValue"]}以便我可以填充和编辑该字段。

但是，如果组件受到控制，则 debounce 不起作用。我在 CodeSandbox 上做了一个简单的例子：https ://codesandbox.io/embed/icy-cloud-ydzj2 ? fontsize =14& hidenavigation =1& theme = dark

代码： 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { debounce } from "lodash";

import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      title: "",
      editMode: false
    };
    this.debouncedEvent = React.createRef();
  }

  debounceEvent(_fn, timer = 500, options = null) {
    this.debouncedEvent.current = debounce(_fn, timer, options);
    return e => {
      e.persist();
      return this.debouncedEvent.current(e);
    };
  }

  componentWillUnmount() {
    this.debouncedEvent.current.cancel();
  }

  onChangeValue = event => {
    const { name, value } = event.target;

    this.setState(() => {
      return { [name]: value };
    });
  };

  onRequestEdit = () => {
    this.setState({ name: "Abla blabla bla", editMode: true });
  };

  onCancelEdit = () => {
    if (this.state.editMode) this.setState({ name: "", editMode: false });
  };

  onSubmit = event => {
    event.preventDefault();
    console.log("Submiting", this.state.name);
  };

  render() {
    const { name, editMode } = this.state;
    const isSubmitOrEditLabel = editMode ? `Edit` : "Submit";
    console.log("rendering", name);
    return (
      <div className="App">
        <h1> How to debounce controlled input ?</h1>
        <button type="button" onClick={this.onRequestEdit}>
          Fill with dummy data
        </button>
        <button type="button" onClick={this.onCancelEdit}>
          Cancel Edit Mode
        </button>
        <div style={{ marginTop: "25px" }}>
          <label>
            Controlled / Can be used for editing but not with debounce
          </label>
          <form onSubmit={this.onSubmit}>
            <input
              required
              type="text"
              name="name"
              value={name}
              placeholder="type something"
              // onChange={this.onChangeValue}
              onChange={this.debounceEvent(this.onChangeValue)}
            />
            <button type="submit">{isSubmitOrEditLabel}</button>
          </form>
        </div>
        <div style={{ marginTop: "25px" }}>
          <label> Uncontrolled / Can't be used for editing </label>
          <form onSubmit={this.onSubmit}>
            <input
              required
              type="text"
              name="name"
              placeholder="type something"
              onChange={this.debounceEvent(this.onChangeValue)}
            />
            <button type="submit">{isSubmitOrEditLabel}</button>
          </form>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
4个回答

所以......显然，没有解决方案。输入从状态中获取值。而 debounce 会阻止状态触发。

我使用 ReactDOM 做了一个解决方法。 

import ReactDOM from "react-dom";

export const setFormDefaultValue = (obj, ref) => {
  if (ref && !ref.current) return;

  if (!obj || !obj instanceof Object) return;

  const _this = [
    ...ReactDOM.findDOMNode(ref.current).getElementsByClassName("form-control")
  ];

  if (_this.length > 0) {
    _this.forEach(el => {
      if (el.name in obj) el.value = obj[el.name];
      else console.error(`Object value for ${el.name} is missing...`);
    });
  }
};

然后使用： 

this.refForm = React.createRef();
setFormDefaultValue(this.state, refForm)

这样我就可以用状态默认值填写我的表单并继续使用去抖动。

看看这个库：https : //www.npmjs.com/package/use-debounce

以下是如何使用它的示例：

import React, { useState } from 'react';
import { useDebounce } from 'use-debounce';

export default function Input() {
  const [text, setText] = useState('Hello');
  const [value] = useDebounce(text, 1000);

  return (
    <div>
      <input
        defaultValue={'Hello'}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <p>Actual value: {text}</p>
      <p>Debounce value: {value}</p>
    </div>
  );
}

你可以试试这个。

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

function usePrevious(value: any) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

const DeboucnedInput = React.memo(({ value, onChange }) => {
  const [localValue, setLocalValue] = useState('');
  const prevValue = usePrevious(value);
  const ref = useRef();
  ref.current = _.debounce(onChange, 500);

  useEffect(() => {
    if (!_.isNil(value) && prevValue !== value && localValue !== value) {
      setLocalValue(value);
    }
  }, [value]);

  const debounceChange = useCallback(
    _.debounce(nextValue => {
      onChange(nextValue);
    }, 1000),
    []
  );

  const handleSearch = useCallback(
    nextValue => {
      if (nextValue !== localValue) {
        setLocalValue(nextValue);
        debounceChange(nextValue);
      }
    },
    [localValue, debounceChange]
  );


  return (
    <input
      type="text"
      value={localValue}
      onChange={handleSearch}
    />
  );
});

起初看起来不可能，但有一种简单的方法可以做到。只需在 react 组件之外创建 debounce 函数表达式即可。

这是一个伪示例，用于现代 React with Hooks：

import React, { useState, useEffect } from "react";
import { debounce } from "lodash";
...


const getSearchResults = debounce((value, dispatch) => {
  dispatch(getDataFromAPI(value));
}, 800);



const SearchData = () => {
  const [inputValue, setInputValue] = useState("");

  ...

  useEffect(() => {
    getSearchResults(inputValue, dispatch);
  }, [inputValue]);

 ...

 return (
   <>
      <input
        type="text"
        placeholder="Search..."
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
      />
      ...
   </>
 );
};

export default SearchData;
其它你可能感兴趣的问题
上一篇将自制模型从 Blender 导入 Cura 3 时出现奇怪的墙壁/面 下一篇如何在 iOS 的 Ionic 电容器中打开登录表单的 webview 自动完成功能？