如何解决如何在React TypeScript中呈现本地存储中的数据?
当我单击“保存”时,我希望将数据显示在“保存”按钮下方的浏览器中,该怎么办?我正在使用打字稿模板进行反应。
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>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。