Browse Source

Change example to use a <form> (#3697)

main
Dan Abramov 3 years ago
committed by GitHub
parent
commit
91cfb4e72c
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 22
      content/docs/handling-events.md

22
content/docs/handling-events.md

@ -29,27 +29,27 @@ is slightly different in React:
</button>
```
Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default form behavior of submitting, you can write:
```html
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
<form onsubmit="console.log('You clicked submit.'); return false">
<button type="submit">Submit</button>
</form>
```
In React, this could instead be:
```js{2-5,8}
function ActionLink() {
function handleClick(e) {
```js{3}
function Form() {
function handleSubmit(e) {
e.preventDefault();
console.log('The link was clicked.');
console.log('You clicked submit.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}
```

Loading…
Cancel
Save