As I understand it, onFocus should be called when the input box is clicked into, and onBlur should be called when something else becomes the focus.

My intentions: I would like to call a function that, when activated by a click, it will .concat the message string of the input box in focuse, but I can't get the onFocus or onBlur to work.

From what I've found searching around, this should do the trick, but doesn't.

import React, { Component } from 'react'
class SocialPost extends Component {
    state = {
        message: this.props.socialPost.message,
        focus: false
    }
    _onBlur() {
        setTimeout(() => {
            if (this.state.focus) {
                this.setState({
                    focus: false,
                });
            }
        }, 0);
    }
    _onFocus() {
        if (!this.state.focus) {
            this.setState({
                focus: true,
            });
        }
    }
    render() {
        return (
            <div className='...'>
                <div className='...'>
                    ...
                    <input
                        onFocus={this._onFocus()}
                        onBlur={this._onBlur()}
                        type='text'
                        value={this.state.message}
                        onChange={...}/>
                    ...
                </div>
            </div>
        )
    }
}
export default SocialPost

1. Why is onFocus and onBlur called when the component is rendered before I click/unclick them?
2. How do I get this onFocus and onBlur to work, is is there another way to focus on the activated input box?

As I understand it, onFocus should be called when the input box is clicked into, and onBlur should be called when something else becomes the focus.

My intentions: I would like to call a function that, when activated by a click, it will .concat the message string of the input box in focuse, but I can't get the onFocus or onBlur to work.

From what I've found searching around, this should do the trick, but doesn't.

import React, { Component } from 'react'
class SocialPost extends Component {
    state = {
        message: this.props.socialPost.message,
        focus: false
    }
    _onBlur() {
        setTimeout(() => {
            if (this.state.focus) {
                this.setState({
                    focus: false,
                });
            }
        }, 0);
    }
    _onFocus() {
        if (!this.state.focus) {
            this.setState({
                focus: true,
            });
        }
    }
    render() {
        return (
            <div className='...'>
                <div className='...'>
                    ...
                    <input
                        onFocus={this._onFocus()}
                        onBlur={this._onBlur()}
                        type='text'
                        value={this.state.message}
                        onChange={...}/>
                    ...
                </div>
            </div>
        )
    }
}
export default SocialPost

1. Why is onFocus and onBlur called when the component is rendered before I click/unclick them?
2. How do I get this onFocus and onBlur to work, is is there another way to focus on the activated input box?

• javascript
• reactjs
• onchange
• onblur

• 1 Why your state is not defined inside the constructor function? – Arup Rakshit Commented Oct 23, 2017 at 19:15
• @ArupRakshit I have seen many examples without inside the constructor and read it was unnecessary. I've been having problems having it one way versus another, so I just left it like this. After adding bind(this) like all suggested, now this.state from where it is being called is undefined, I will add constructor and try to fix it this way – Kevin Danikowski Commented Oct 23, 2017 at 19:18
• 1 this has special meaning inside the constructor and outside the constructor. The way react use state, it needs to be inside the constructor when using ES2015 class. – Arup Rakshit Commented Oct 23, 2017 at 19:20

4 Answers 4

1. It is called because you run the function in the render method, you should pass function, not what they return.

Change this:

onFocus={this._onFocus()}
onBlur={this._onBlur()}

to this:

onFocus={this._onFocus}
onBlur={this._onBlur}

2.You cannot declare component's state like that. It has to be done in constructor. Also if you want to refer to SocialPost's this you have to bind it. Imo the best place to do it is in the constructor. The whole code should look like this:

import React, { Component } from 'react'
class SocialPost extends Component {
    constructor (props) {
      super(props)
      this.state = {
        message: props.socialPost.message,
        focus: false
      }

      this._onBlur = this._onBlur.bind(this)
      this._onFocus = this._onFocus.bind(this)
    }
    _onBlur() {
        setTimeout(() => {
            if (this.state.focus) {
                this.setState({
                    focus: false,
                });
            }
        }, 0);
    }
    _onFocus() {
        if (!this.state.focus) {
            this.setState({
                focus: true,
            });
        }
    }
    render() {
        return (
            <div className='...'>
                <div className='...'>
                    ...
                    <input
                        onFocus={this._onFocus}
                        onBlur={this._onBlur}
                        type='text'
                        value={this.state.message}
                        onChange={...}/>
                    ...
                </div>
            </div>
        )
    }
}
export default SocialPost

Change

onFocus={this._onFocus()}
onBlur={this._onBlur()}

to

onFocus={this._onFocus}
onBlur={this._onBlur}

or

onFocus={this._onFocus.bind(this)}
onBlur={this._onBlur.bind(this)}

<input onFocus={this._onFocus.bind(this)} onBlur={this._onBlur.bind(this)} />

that's how it should be if you want to use THIS in the function

You are executing the method here

<input
    onFocus={this._onFocus()}
    onBlur={this._onBlur()}
    type='text'
    value={this.state.message}
    onChange={...}/>

It should be without parenthesis.

<input
    onFocus={this._onFocus.bind(this)}
    onBlur={this._onBlur.bind(this)}
    type='text'
    value={this.state.message}
    onChange={...}/>

EDIT:

And add .bind(this)