javascript - 如何在反应打字稿中呈现本地存储中的数据?
问题描述
当我单击保存时,我希望数据显示在我的保存按钮下方的浏览器中,我该怎么做?我正在使用对打字稿模板做出反应。
function ButtonDefaultExample(props: IButtonExampleProps) {
const { disabled, checked } = props;
const [showEditor, setShowEditor] = useState(false);
const [showLesson, setShowLesson] = useState(false);
return (
<div style={{width: '80%', margin:'0px auto'}}>
<h1>Click to create a new course.</h1>
<Stack horizontal tokens={{childrenGap:10}} horizontalAlign="center" style={{width:'100%'}}>
<DefaultButton text="Create Course" onClick={()=>setShowLesson(true)} allowDisabledFocus disabled={disabled} checked={checked} />
</Stack>
<br><br>
{
showLesson && (
<DefaultButton text="Create Lesson" onClick={()=>setShowEditor(true)} allowDisabledFocus disabled={disabled} checked={checked} style={{alignItems:'center'}} />
)
}
{
showEditor && (
<SunEditor onChange={ (content: string) => {
localStorage.setItem("Contents", content);
} } />
)
}
<DefaultButton text="Save" onClick={() => localStorage.getItem("Contents") } allowDisabledFocus disabled={disabled} checked={checked} />
</div>
);
}
解决方案
也许你可以把它保存在一个状态中,然后显示它。
尝试这个
function ButtonDefaultExample(props: IButtonExampleProps){
const { disabled, checked } = props;
const [showEditor, setShowEditor] = useState(false);
const [showLesson, setShowLesson] = useState(false);
const [showContent, setShowContent] = useState('');
return (
<div style={{width: '80%', margin:'0px auto'}}>
<h1>Click to create a new course.</h1>
<Stack horizontal tokens={{childrenGap:10}} horizontalAlign="center" style={{width:'100%'}}>
<DefaultButton text="Create Course" onClick={()=>setShowLesson(true)} allowDisabledFocus disabled={disabled} checked={checked} />
</Stack>
<br></br>
{
showLesson && (
<DefaultButton text="Create Lesson" onClick={()=>setShowEditor(true)} allowDisabledFocus disabled={disabled} checked={checked} style={{alignItems:'center'}} />
)
}
{
showEditor && (
<SunEditor onChange={ (content: string) => {
localStorage.setItem("Contents", content);
} } />
)
}
<DefaultButton text="Save" onClick={() => setShowContent(localStorage.getItem("Contents")) } allowDisabledFocus disabled={disabled} checked={checked} />
{showContent}
</div>
);
}
推荐阅读
- java - Java中同步/易失的可变可见性影响程度是多少
- ruby-on-rails - 适用于帖子的相同redirect_to 路由不适用于评论(相同的网址)
- authentication - GCP Cloud Router 不支持 BGP 身份验证吗?
- javascript - 在 GrapesJS 中将组件添加到 blockManager
- javascript - Javascript - .push() 多个对象从 for 循环到多维数组
- java - 使用 Axis 1.4 客户端的 NTLM 代理身份验证
- sql - 当 SQL 中的两个值具有不同的数据类型时,如何将它们与给定的十进制精度进行比较?
- r - 向量化霍夫丁的距离
- excel - Cuberankedmember 得到错误的顺序
- java - 为什么 Date 对象不代表我的 JVM 时区中的日期?