Oleksandr Karpovich
e40f7a0d9a
Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com> |
3 years ago | |
---|---|---|
.. | ||
README.md | Update web tutorials for 0.5.0-build228 (#833) | 3 years ago |
README.md
Events handling in Compose Web
The API is experimental, and breaking changes can be expected
You can add event listeners in the attrs
block:
onClick
Button(
attrs = {
onClick { wrappedMouseEvent ->
// wrappedMouseEvent is of `WrappedMouseEvent` type
println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}")
val nativeEvent = wrappedMouseEvent.nativeEvent // [MouseEvent](https://developer.mozilla.org/en/docs/Web/API/MouseEvent)
}
}
) {
Text("Button")
}
onInput
val text = remember { mutableStateOf("") }
TextArea(
value = text.value,
attrs = {
onInput {
text.value = it.value
}
}
)
Other event handlers
For events that don't have their own configuration functions in the attrs
block, you can use addEventListener
with the name
of the event, options
, and an pass an eventListener
which receives a WrappedEvent
. In this example, we're defining the behavior of a Form
element when it triggers the submit
event:
Form(attrs = {
this.addEventListener("submit") {
console.log("Hello, Submit!")
it.nativeEvent.preventDefault()
}
})
Your event handlers receive wrapped events that inherit from GenericWrappedEvent
, which also provides access to the underlying nativeEvent
– the actual event created by JS runtime -
https://developer.mozilla.org/en-US/docs/Web/API/Event
There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the source code.
Runnable example
import androidx.compose.runtime.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.renderComposable
fun main() {
renderComposable(rootElementId = "root") {
Button(
attrs = {
onClick { wrappedMouseEvent ->
// wrappedMouseEvent is of `WrappedMouseEvent` type
println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}")
val nativeEvent = wrappedMouseEvent.nativeEvent
}
}
) {
Text("Button")
}
val text = remember { mutableStateOf("") }
TextArea(
value = text.value,
attrs = {
onInput {
text.value = it.value
}
}
)
Span {
Text("Typed text = ${text.value}")
}
}
}