When I click save I want the data to be displayed onto the browser below my save button, how do I do that? I am using react with a typescript template.
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>
);
}
Maybe you can save it in a state and then display it.
Try this
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>
);
}
You probably need to use useEffect
which will execute whenever the contents ( value
) of the editor change:
function ButtonDefaultExample(props: IButtonExampleProps) {
const { disabled, checked } = props
const [showEditor, setShowEditor] = React.useState(false)
const [showLesson, setShowLesson] = React.useState(false)
const [value, setValue] = React.useState(
localStorage.getItem('Contents') || ''
)
React.useEffect(() => {
localStorage.setItem('Contents', value)
}, [value])
const onChange = (content: string) => {
setValue(content)
}
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={onChange} />}
<DefaultButton
text="Save"
onClick={() => {/* Do some backend stuff */}}
allowDisabledFocus
disabled={disabled}
checked={checked}
/>
{value}
</div>
)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.