preact form not working?
hi all, i'm just trying to make a simple form but for some reason it keeps submitting the form as if there's no
inputbar.jsx
root.ksx
onSubmitonSubmit function...inputbar.jsx
/** @jsx h */
import { h, Component } from "https://esm.sh/preact";
export default class InputBar extends Component {
state = { value: '' }
onSubmit = e => {
console.log("submit");
e.preventDefault();
}
onInput = e => {
const { value } = e.target;
this.setState({ value });
}
render(_, { value }) {
return (
<div>
<form onSubmit={this.onSubmit}>
<input type="text" placeholder="enter your RSS URL" name="import" value={value} onInput={this.onInput}/>
<button type="submit" style="visibility: hidden"></button>
</form>
<br/>
<br/>
<details>
<summary>your feeds</summary>
<div>feed list</div>
</details>
</div>
)
}
}/** @jsx h */
import { h, Component } from "https://esm.sh/preact";
export default class InputBar extends Component {
state = { value: '' }
onSubmit = e => {
console.log("submit");
e.preventDefault();
}
onInput = e => {
const { value } = e.target;
this.setState({ value });
}
render(_, { value }) {
return (
<div>
<form onSubmit={this.onSubmit}>
<input type="text" placeholder="enter your RSS URL" name="import" value={value} onInput={this.onInput}/>
<button type="submit" style="visibility: hidden"></button>
</form>
<br/>
<br/>
<details>
<summary>your feeds</summary>
<div>feed list</div>
</details>
</div>
)
}
}root.ksx
/** @jsx h */
/* https://todo.sr.ht/~jordanreger/feeds/5 */
import InputBar from "./inputbar.jsx";
import FeedList from "./feedlist.jsx";
import { h } from "https://esm.sh/preact";
import { render } from "https://esm.sh/preact-render-to-string";
const root = `
<!DOCTYPE html>
<html lang="en">
...
<article>
<div class="body">
feeds is a very basic rss reader. view the source on <a href="https://git.sr.ht/~jordanreger/feeds">sourcehut</a>.
<br/>
(for links that don't work, please add an issue to <a href="https://todo.sr.ht/~jordanreger/feeds" target="_blank">todo.sr.ht/~jordanreger/feeds</a>)
<br/>
<br/>
${render(<InputBar/>)}
</div>
</article>
...
</html>
`;
export { root as page_root };/** @jsx h */
/* https://todo.sr.ht/~jordanreger/feeds/5 */
import InputBar from "./inputbar.jsx";
import FeedList from "./feedlist.jsx";
import { h } from "https://esm.sh/preact";
import { render } from "https://esm.sh/preact-render-to-string";
const root = `
<!DOCTYPE html>
<html lang="en">
...
<article>
<div class="body">
feeds is a very basic rss reader. view the source on <a href="https://git.sr.ht/~jordanreger/feeds">sourcehut</a>.
<br/>
(for links that don't work, please add an issue to <a href="https://todo.sr.ht/~jordanreger/feeds" target="_blank">todo.sr.ht/~jordanreger/feeds</a>)
<br/>
<br/>
${render(<InputBar/>)}
</div>
</article>
...
</html>
`;
export { root as page_root };
