使用 onchange 事件挂钩自动保存编辑器注释答案

【问题标题】：Autosave editor notes with onchange event hook使用 onchange 事件挂钩自动保存编辑器注释
【发布时间】：2019-12-16 03:39:26
【问题描述】：

找到了使用 Quill 文本编辑器进行自动保存的解决方案： CodePen 继续尝试将它安装到 React hooks useState，见下文。此解决方案出错：

“来自 useState() 和 useReducer() Hooks 的状态更新不支持第二个回调参数。要在渲染后执行副作用，请在组件主体中使用 useEffect() 声明它。”

任何想法如何让 onChange 仍然触发带有 Hooks 状态的自动保存？

  const [timeOut, setTimeOut] = useState(null);
  const [notesWritten, setNotesWritten] = useState(''); // Value:
  const [saved, setSaved] = useState('');


  const resetTimeout = (id, newID) => {
    clearTimeout(id);
    return newID;
  };

  const saveValue = () => {
    setSaved(true);
    setTimeOut(() => setSaved(false), 1000);
  };

  const editValue = (textWritten) => {
    setTimeOut(resetTimeout(timeOut, setTimeOut(saveValue, 400)), setNotesWritten(textWritten));
  };


  return (
      <ReactQuill
        value={notes}
        // onChange={value => onChange(value)}
        onChange={(value) => {
          onChange(value);
          editValue(value);
        }}
      />
  )

【问题讨论】：

标签： javascript reactjs react-hooks quill

【解决方案1】：

通过从原始解决方案中分离嵌套的 setStates: this.setState({timeout: resetTimeout(this.state.timeout, setTimeout(this.saveValue, 400)), value: value}) 找到了解决方案。像这样：

  const [timeOutValue, setTimeOutValue] = useState(null);
  const [notesWritten, setNotesWritten] = useState(''); // Value:

  const resetTimeout = (id, newID) => {
    clearTimeout(id);
    return newID;
  };

  const saveValue = () => {
    saveNotes();
  };

  const editValue = (textWritten) => {
    setTimeOutValue(resetTimeout(timeOutValue, setTimeout(saveValue, 1000)));
    setNotesWritten(textWritten);
  };

return (
      <ReactQuill
        value={notes}
        // onChange={value => onChange(value)}
        onChange={(value) => {
          onChange(value);
          editValue(value);
        }}
      />
  )

【讨论】：