Event Handlers are attached to tags and components using the on method.
SELECT ... do
...
end.on(:change) do |e|
mutate @mode = e.target.value.to_i
end
The on method takes the event name symbol (note that onClick becomes :click) and the block is passed the React.js event object.
BUTTON { 'Press me' }.on(:click) { do_something }
# you can add an event handler to any HTML element
H1(class: :cursor_hand) { 'Click me' }.on(:click) { do_something }
Event handlers can be chained like so
INPUT ... do
...
end.on(:key_up) do |e|
...
end.on(:change) do |e|
...
end
Event Handling and Synthetic Events
Under the Hood: Event Delegation
React::Event
Your event handlers will be passed instances of Hyperstack::Component::Event, a wrapper around react.js's SyntheticEvent which in turn is a cross browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stop_propagation() and prevent_default(), except the events work identically across all browsers.
For example:
class YouSaid < HyperComponent
state_accessor :value
render(DIV) do
INPUT(value: value)
.on(:key_down) do |e|
next unless e.key_code == 13
alert "You said: #{value}"
self.value = ""
end
.on(:change) do |e|
self.value = e.target.value
end
end
end
If you find that you need the underlying browser event for some reason use the native_event method (i.e. evt.native_event).
In the following responses shown as (native ...) indicate the value returned is a native object with an Opal wrapper. In some cases there will be opal methods available (i.e. for native DOMNode values) and in other cases you will have to convert to the native value with .to_n and then use javascript directly.
The underlying React SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event method has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way - don't store the whole event and think you can use it later after you ate breakfast.
The :mouse_enter and :mouse_leave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
The React engine ensures that all events behave identically in IE8 and above by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with , regardless of which browser you're using.
React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see .
Hyperstack also includes an enter event that fires on key_down when the key_code == 13.
