reactjs - 如何在刷新时保存编辑的文本?
问题描述
我正在使用一个名为“EdiText”的 React 组件。现在,我可以保存文本,但如果我刷新页面,它会恢复到初始值。即使在页面刷新后,我也想保存并保留编辑的值。
我的代码如下:
const Project = ({ project, onDelete}) => {
const [value, setValue] = useState('')
const handleSave = (val) => {
console.log('Edited value ->', val);
setValue(val);
}
return (
<div>
<div className="project-component">
<EdiText
type="text"
className="project-title"
value={project.title}
onSave={handleSave}
showButtonsOnHover
submitOnUnfocus
cancelOnUnfocus
/>
<br/>
<EdiText
type="textarea"
className="project-description"
value={project.description}
onSave={handleSave}
showButtonsOnHover
submitOnUnfocus
cancelOnUnfocus
/>
<Link to={`/projectpage/${project.id}`} className="view-icon"><FaEye/></Link>
<FaTrash className="delete-icon" onClick={() => onDelete(project.id)}/>
</div>
</div>
)
}
解决方案
您可以为此使用自定义挂钩。
// Hook
function useLocalStorage(key, initialValue) {
// State to store our value
// Pass initial state function to useState so logic is only executed once
const [storedValue, setStoredValue] = useState(() => {
try {
// Get from local storage by key
const item = window.localStorage.getItem(key);
// Parse stored json or if none return initialValue
return item ? JSON.parse(item) : initialValue;
} catch (error) {
// If error also return initialValue
console.log(error);
return initialValue;
}
});
// Return a wrapped version of useState's setter function that ...
// ... persists the new value to localStorage.
const setValue = (value) => {
try {
// Allow value to be a function so we have same API as useState
const valueToStore =
value instanceof Function ? value(storedValue) : value;
// Save state
setStoredValue(valueToStore);
// Save to local storage
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
// A more advanced implementation would handle the error case
console.log(error);
}
};
return [storedValue, setValue];
}
将其存储到另一个文件中并像这样导入和使用:
const [value, setValue] = useLocalStorage('')
推荐阅读
- apache-kafka - 创建扁平流时数据重复
- python - 如何在 Python 中的字符串中添加 @、/、\、* 等字符,而不将其作为转义序列读取
- structuremap - 将 MassTransit 与 StructureMap 注册表类一起使用
- paypal - Paypal 和 Magento 2 的问题(从 magento 1 迁移到 paypal 工作)
- javascript - 如何向 WebWorkers 发送 wasm.instance.exports 对象和从 WebWorkers 发送对象?
- ios - 我们如何擦除 TestFlight 应用程序中的钥匙串数据?
- javascript - Input spinner If value >0 then select card
- flutter - 某些 iOS 和 android 设备中的溢出问题
- php - 如何在 PHP 中从 JSON 中获取元素?
- python - 我需要找到一个列表的所有排列