DataBinding Flashcards
This deck contains the cards for ReactJS two binding details (50 cards)
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]
