Make minor grammar, spelling, and style changes
This commit is contained in:
1 parent
cb1e16c91c
commit
e61fa44497
10 files changed
+38
-39
No files matched your search
@@ -1,6 +1,6 @@
|
||||
# Event handlers
|
||||
|
||||
To make our boring UIs less static and more interesting, we want to add the ability to interact to user input. To do this, we need to add some event handlers.
|
||||
To make our boring UIs less static and more interesting, we want to add the ability to interact with user input. To do this, we need to add some event handlers.
|
||||
|
||||
|
||||
## The most basic events: clicks
|
||||
@@ -82,7 +82,7 @@ div {
|
||||
}
|
||||
```
|
||||
|
||||
In this particular layout, a click on the inner div is transitively also a click on the outer div. If we didn't want the outer div to be triggered every time we trigger the inner div, then we'd want to call "cancel_bubble".
|
||||
In this particular layout, a click on the inner div is transitively also a click on the outer div. If we didn't want the outer div to be triggered every time we trigger the inner div, then we'd want to call `cancel_bubble()`.
|
||||
|
||||
This will prevent any listeners above the current listener from being triggered.
|
||||
|
||||
@@ -102,7 +102,7 @@ div {
|
||||
|
||||
## Prevent Default
|
||||
|
||||
With HTML based renderers, the browser will automatically perform some action. For text inputs, this would be entering the provided key. For forms, this might involve navigating the page.
|
||||
With HTML-based renderers, the browser will automatically perform some action. For text inputs, this would be entering the provided key. For forms, this might involve navigating the page.
|
||||
|
||||
In some instances, you don't want this default behavior. In these cases, instead of handling the event directly, you'd want to prevent any default handlers.
|
||||
|
||||
|
||||
@@ -60,14 +60,13 @@ cx.render(rsx!{
|
||||
|
||||
## Uncontrolled Inputs
|
||||
|
||||
When working with large sets of inputs, you might be quickly tired of creating `use_state` for each value. Additionally, the pattern of one use_state per interaction might deteriorate when you need to have a flexible number of inputs. In these cases, we use "uncontrolled" inputs. Here, we don't drive the value of the input from the use_state, choosing to leave it in an "uncontrolled" state.
|
||||
When working with large sets of inputs, you might be quickly tired of creating `use_state` for each value. Additionally, the pattern of one `use_state` per interaction might deteriorate when you need to have a flexible number of inputs. In these cases, we use "uncontrolled" inputs. Here, we don't drive the value of the input from the `use_state`, choosing to leave it in an "uncontrolled" state.
|
||||
|
||||
This approach can be more performant, more flexible, but more prone to UI inconsistencies than its controlled counterpart.
|
||||
This approach can be more performant and more flexible, but more prone to UI inconsistencies than its controlled counterpart.
|
||||
|
||||
To use the "uncontrolled" pattern, we simply omit setting the value of the input. Instead, we can react to the change directly on the input itself, or from a form element higher up in the tree.
|
||||
|
||||
|
||||
For this example, we don't attach any `use_state` handles into the labels. Instead, we simply attach an "oninput" handler to the form element. This will run each time any of the child inputs change, allowing us to perform tasks like form validation.
|
||||
For this example, we don't attach any `use_state` handles into the labels. Instead, we simply attach an `oninput` handler to the form element. This will run each time any of the child inputs change, allowing us to perform tasks like form validation.
|
||||
|
||||
```rust
|
||||
form {
|
||||
@@ -81,4 +80,3 @@ form {
|
||||
input { name: "date", }
|
||||
}
|
||||
```
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
The first fundamental hook for state management is `use_state`. This particular hook is designed to work well with the entire Dioxus ecosystem including futures, children, and memoization.
|
||||
|
||||
|
||||
## Basic usage.
|
||||
## Basic usage
|
||||
|
||||
The simplest use case of `use_state` is a simple counter. The handle returned by `use_state` implements `Add` and `AddAssign`. Writing through `AddAssign` will automatically mark the component as dirty, forcing an update.
|
||||
|
||||
|
||||
Reference in new issue
Block a user