DataBinding Flashcards
This deck contains the cards for ReactJS two binding details
Is two way databinding supported with ReactJS ?
Implicitly it is not supported
What is two way binding ?
Access data from source and binding to the UI.
Update UI changes back to source.
Two way binding example ?
Drawback of React ?
Supports only one-way binding
Code Example
Event for 2 way binding
OnChange only
Default JS event args
this(info about object) and event (event details)
React Event arg
React can use only one arg, which provides access to both object and event details.
event (object and event related details ) (this is used in JS)
event.target.id, name, value, calssName
event.clientX, clientY, shitKey, ctrlKey
React and Java Script two way binding differences ?
Code Example
// FlashCard.js
import React from ‘react’;
class FlashCard extends React.Component {
handleChange = (event) => {
// Call the parent’s onChange method with the updated value
this.props.onChange(event.target.value);
};
render() {
return (
<div>
<label>{this.props.label}</label>
<input
type=”text”
value={this.props.value}
onChange={this.handleChange}
/>
</div>
);
}
}
export default FlashCard;
JS and React Examples
<input></input>
<p></p>
<script>
const inputElement = document.getElementById('myInput');
const outputElement = document.getElementById('output');
inputElement.addEventListener('input', function(event) {
outputElement.textContent = event.target.value;
});
</script>
import React, { useState } from ‘react’;
function MyComponent() {
const [inputValue, setInputValue] = useState(‘’);
return (
<div>
<input
type=”text”
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<p>{inputValue}</p>
</div>
);
}
Different types of Binding
Data Binding (one way, two way)
Style Binding
Class Binding
Event Binding
Style Binding
Apply styles dynamically to any element
JavaScript Style Binding
<input></input>
document.getElementById(“userName”).style.cssAttribute=”value”
CSS => background-color => backGroundColor
=> font-style => fontStyle
React Style Binding
<input type=”text” style={{attributeName:value,attributeName:value}} /> (value must be string, style attributes are javascript objects)
<input></input> => Invalid
<input type=”text” style={{color:’red’}} => valid (inline Styles)
Code Example
Html style types
1) inline (faster, not reusable)
2) embedded (not reusable)
3) external (reusable)
What is difference between display:none and visibility:hidden
display:none hides and allocated space is removed
visibility:hidden allocated space is retained
Issues with StyleBinding
Style is inline and it is good with individual elements, not reusable across elements.
Event Binding in React
Event is a message sent by a sender to its subscriber in order to notify the change.
Design Pattern - “Observer” . it is under “Behavioral Patterns”
Event uses “Delegate” mechanism[Function Pointer]
Structural Pattern
Behavior Patterns
what is an event ?
Every event is a browser event
in JS html elements can use the browser events
React cant use “browser” events [Browser events are related BOM]
React uses a virtual DOM library called “SyntheticEvents” , which map to browser events.
Actual and Synthetic events
ReactJS is builtin with typescript
Every event extends “SyntheticEvent” [interface]
What is a onclick event ?
What is an Event Handler ?
Events are configured for elements using an EventListener or EventHandler
React uses EventHandler for Synthetic events
Syntax:
<button onClick={insertClick}>
onClick={insertClick} => EventHandler
onClick => Event
onChange : ChangeEventHandler : EventHandler
onClick : ClickEventHandler : EventHandler
How many ways event handler can be configured
1) Inline Functionality
Syntax: <button onClick={function(){alert(‘insert clicked’);}}>Insert</button>
<button onClick={() => {alert(‘insert clicked’);}}>Insert</button>
2) Embedded Functionality
Syntax:
function InsertClick(){}
<button onClick={InsertClick}>Insert</button>
What is the advantage of Embedded Event Handler ?
it can be used across various requests
What are Event arguments ?
Every event in React have a default argument, which maps to “Event” base
Event base can provide access to both element related properties and event properties.
Event properties are accessible using “target”
e.target.value, e.target.Id
Event properties are accessible directly
e.clientX, e.clientY, e.shiftKey, e.which, e.ctrlKey
What is event propagation ?
Child event is propagated to the parent event. Stop propagation can prevent it.
What is prevent default ?
HTML form provides generic buttons (Predefined functionality)
a) Submit <button> Submit form data to server
b) Reset <button> - Reset form data
<button> - default is submit
HTML form provides non-generic buttons ( without Predefined functionality)
<button></button></button></button></button>
Generic elements have predefined functionality which firesup after the custom functions that you defined for an element
Can we have multiple forms in a component ?
Yes
Can we configure a form within another form (nested forms) ?
No. Possible with Pusedo froms
<form>
<div form="></div>
</form>
AJAX
used for partial post forms
Can we have multiple submit buttons ?
Yes
DOM Hierarchy
Form Submit
How to handle onload action in react ?
React does not have load event for component. It has “Mount” event. “Mount” event is defined for handling actions when the component is mounted onto page.
Function component mount event is defined by using a Hook called “useEffect”
useEffect(() => {},[dependencies]);
useEffect(() => {
setUserName(‘John’);
),[]);
Various Synthetic Events in React
- Syntetic Mouce Events
* onMouseOver
* onMosueOut
* onMouseUp
* onMouseDown
* onMouseMove - Synthetic Keyboard Events
* onKeyUp
* onKeyDown
* onKeyPress
Used with KeyEvent Properties
- KeyCode, charCode,whick, shiftKey,CtrlKey, altKey
When to use KeyUp, KeyDown, KeyPress ?
KeyPress - Use it for ASCII chars
KeyUp, KeyDown - Use it for chars
Element State Events
- onBlur
- onFocus
- onChange
- onSelectStart
Double Click Event
Disable Right Click
Actual DOM, virtual DOM deals with component only. Synthetic events work only for components.
ClipBoard Events
onCut
onCopy
onPaste
Touch Events
onTouchStart
onTouchEnd
onTouchMove
Timer Events
setTimeout()
clearTimeout()
setInterval()
clearInterval()
setTimeout()
clearTimeout()
setInterval()
Form Events
- These events will fireup only with generic buttons(submit, reset)
Syntax : <form onSubmit={handleSubmit} onReset={handleReset}>
<button>Submit</button>
<button>Cancel</button>
</form>
2.
