如何在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>
  );
 }