如何在 React 中重置 contenteditable 元素？

如何解决如何在 React 中重置 contenteditable 元素？

我正在渲染一组项目，其中每个项目都有一个 contenteditable 字段。

App.js

import { useState } from "react";
import Item from "./Item";
import "./styles.css";

export default function App() {
  const [items,setItems] = useState([
    { id: 1,text: "It is raining all day long." },{ id: 2,text: "The flower has a nice fragrance." },{ id: 3,text: "The charging is complete." },{ id: 4,text: "The room needs to be sweeped." }
  ]);

  return (
    <div className="App">
      {items.map((item) => (
        <Item key={item.id} item={item} />
      ))}

      <button>Reset</button>
    </div>
  );
}

Item.js

const Item = ({ item }) => {
  return (
    <div>
      <p contentEditable="true">{item.text}</p>
    </div>
  );
};

export default Item;

正如你在 App.js 中看到的，我有一个重置按钮。我希望点击这个重置按钮时，必须显示所有Items的原始内容。

例如如果将“整天都在下雨”更改为“不下雨”，则在按下重置按钮时，它会变回“整天都在下雨”。

任何帮助将不胜感激。非常感谢。

解决方法

一种方法是将初始状态保存为默认状态，当点击重置按钮时，只需将当前状态更改为默认状态即初始状态。

const initialState = [
    { id: 1,text: "It is raining all day long." },{ id: 2,text: "The flower has a nice fragrance." },{ id: 3,text: "The charging is complete." },{ id: 4,text: "The room needs to be sweeped." }
  ]

 const [items,setItems] = useState(initialState);

对于重置按钮；

const onPress = () => {
   setItems(initialState);

}

  <button onClick={onPress}>Reset</button>

,

您可以使用 useReducer 重置状态以响应点击。

它看起来像下图

function init(initialText) {
  return {text: initialText};
}

function reducer(state,action) {
  switch (action.type) {
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function App({initialText}) {
  const [state,dispatch] = useReducer(reducer,initialText,init);
  return (
    <>
      Text: {state.text}
      <button
        onClick={() => dispatch({type: 'reset',payload: initialText})}>
        Reset
      </button>
    </>
  );
}

查看官方文档：https://reactjs.org/docs/hooks-reference.html#lazy-initialization

,

我找到了解决此问题的方法。

App.js

我们可以做的是，我们可以在 App.js 中定义一个状态，比如 resets，它的初始值为 0。此后，我们将此重置作为道具传递给子组件 <Item />。

现在，当点击重置按钮时，我们将此 resets 的值增加 1。

这在以下代码中进行了演示：

import { useEffect,useState } from "react";
import { item_data } from "./data";
import Item from "./Item";
import "./styles.css";

export default function App() {
  const [items,setItems] = useState(item_data);
  const [resets,setResets] = useState(0);
 
  const handleReset = () => {
    setResets((resets) => resets + 1);
  };

  return (
    <div className="App">
      {items.map((item) => (
        <Item key={item.id} item={item} resets={resets} />
      ))}

      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

Item.js

在这里，我们定义了一个条件 useEffect，它在每次 resets 的值改变时运行。因此，当这种情况发生时，我们从 DOM 中获取 contentEditable 字段，并将其 innerHTML 设置为原始值，即在本例中为 item.text。

这是代码演示：

import { useEffect,useState } from "react";

const Item = ({ item,resets }) => {
  useEffect(() => {
    const text = document.getElementById(`text-${item.id}`);
    text.innerHTML = item.text;
  },[resets]);
 
  return (
    <div className="item">
      <p
        id={`text-${item.id}`}
        contentEditable={true}
        suppressContentEditableWarning={true}
        dangerouslySetInnerHTML={{ __html: item.text }}
      ></p>
    </div>
  );
};

export default Item;

感谢您的所有帮助。该解决方案目前对我有用。如果有任何限制，那么请评论相同。