Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
React Answers

How to fix current is always null when using React.createRef with React?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix current is always null when using React.createRef with React.

In this article, we’ll look at how to fix current is always null when using React.createRef with React.

How to fix current is always null when using React.createRef with React?

To fix current is always null when using React.createRef with React, we assign the ref created by createRef to an element.

For instance, we write

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.test = React.createRef();
  }

  handleClick = () => console.log(this.test.current.value);

  render() {
    return (
      <div>
        <input ref={this.test} />
        <button onClick={this.handleClick}>Get Value</button>
      </div>
    );
  }
}

to create the test ref with createRef.

Then we assign test as the value of the ref prop of the input.

Finally, we get the ref’s value with this.test.current.value, which should be set to the input.

Conclusion

To fix current is always null when using React.createRef with React, we assign the ref created by createRef to an element.

Categories
Vue Answers

How to use onfocusout function in Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to use onfocusout function in Vue.js.

In this article, we’ll look at how to use onfocusout function in Vue.js.

How to use onfocusout function in Vue.js?

To use onfocusout function in Vue.js, we listen for the blur event.

For instance, we write

<template>
  <input @blur="handleBlur" />
</template>

to set the handleBlur method as the blur event handler function.

handleBlur is called when we move focus away from the input.

Conclusion

To use onfocusout function in Vue.js, we listen for the blur event.

Categories
React Native Answers

How to change button style on press in React Native?

Labrador retriever puppy walking on green grass

Sometimes, we want to change button style on press in React Native.

In this article, we’ll look at how to change button style on press in React Native.

How to change button style on press in React Native?

To change button style on press in React Native, we set the underlayColor of the TouchableHighlight component.

For instance, we write

<TouchableHighlight style={styles.btn} underlayColor="yellow" />;

to set the underlayColor to 'yellow' to make the background color yellow when we tap the region.

Conclusion

To change button style on press in React Native, we set the underlayColor of the TouchableHighlight component.

Categories
JavaScript Answers

How to merge image using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to merge image using JavaScript.

In this article, we’ll look at how to merge image using JavaScript.

How to merge image using JavaScript?

To merge image using JavaScript, we use the merge-images package.

To install it, we run

npm i merge-images

Then we use it by writing

import mergeImages from "merge-images";

const b64 = await mergeImages(["/body.png", "/eyes.png", "/mouth.png"]);
document.querySelector("img").src = b64;

to call mergeImages to return a promise that merges the images at the paths in the array.

Then we get the b64 base64 image URL string from the returned promise and assign that as the value of the src attribute of an img element.

Conclusion

To merge image using JavaScript, we use the merge-images package.

Categories
JavaScript Answers

How to get the referrer with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get the referrer with JavaScript.

In this article, we’ll look at how to get the referrer with JavaScript.

How to get the referrer with JavaScript?

To get the referrer with JavaScript, we use the document.referrer property.

For instance, we write

const referrer = document.referrer;

to get the referrer of the current page.

Conclusion

To get the referrer with JavaScript, we use the document.referrer property.