Refreshing inside <form> tag
Closed this issue · 6 comments
ValEmpire commented
when used inside the
megahertz commented
Could you provide a code sample?
Lesnock commented
I'm having the same problem.
When I click on the editor, the form is submitted.
casperleerink commented
I have the same problem
`
Title*
<input
type="text"
name="title"
value={data.title}
className={styles.input}
placeholder="Title of the entry"
id="title"
onChange={event => onTitleChange(event)}
/>
<label htmlFor="text" className={styles.label}>Text</label>
<DefaultEditor
value={data.html}
onChange={onTextChange}
name="text"
className={styles.input}
placeholder="optional text"
/>
<button onClick={submitNewEntry} className={styles.button}>
Create new Entry
</button>
</form>`
the function is a simple value setter:
const onTextChange = (e) => { setData({ ...data, html: e.target.value, }); }
It refreshes the page when clicking on bold or any other button in the component. This is more than likely because there is no e.preventDefault() on those button handlers in the component. When a button is in a form the default browser behavior makes it submit and refresh the page.
megahertz commented
@casperleerink Thank you, I'll try to fix it till December.
megahertz commented
Fixed