March 10th, 2018
Hello! Today at the React for Beginners course by Wes Bos I learned something about events, refs, and binding in React.
Events in react work the same as in JavaScript.
React wraps events in something called Synthetic Event.
They are inline
<button onClick={this.handleClick}>Click me!</button>
An important rule in React is, don't touch the DOM.
So how to reference the input without using querySelectore or jQuery.
We do it with a ref to reference it.
myInput = React.createRef();
...
render() {
...
ref={this.myInput};
Binding
goToStore = (event) => {
console.log(this);
We the property to an arrow function which will allow to bind the value of 'this' to the component.
Handling events.
Push-state - change the URL without having to refresh the page.
We achieve this with React router.
goToStore = event => {
event.preventDefault();
const storeName = this.myInput.value.value;
this.props.history.push(`/store/${storeName}`);
};
We have to stop the form from submitting, we just need the input. Then grab the input with the ref. Finally change the page with push-state.
At the Web Development Bootcamp by Colt Steele I started working on a YelpCamp app, and did the landing pages, added some images in an object.
img src="<%= campground.image %>"
to add an image
Cheers!