Javascript ReactJS - 如何让 onFocus 和 onBlur 工作

ReactJS - How to get onFocus and onBlur to work

提问by Kevin Danikowski

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

据我了解，onFocus应该在输入框被点击onBlur时调用，当其他东西成为焦点时应该调用。

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

我的意图：我想调用一个函数，当单击激活时，它会.concat在焦点中输入框的消息字符串，但我无法使用onFocusoronBlur工作。

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 onFocusand onBlurcalled when the component is rendered before I click/unclick them?
2. How do I get this onFocusand onBlurto work, is is there another way to focus on the activated input box?

1. 为什么onFocus和onBlur在之前我点击/取消勾选这些组件被渲染叫什么名字？
2. 我如何得到这个onFocus并onBlur工作，是否有另一种方法可以专注于激活的输入框？

回答by P. Zietal

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

1. 之所以调用它，是因为您在 render 方法中运行该函数，您应该传递函数，而不是它们返回的内容。

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 thisyou have to bind it. Imo the best place to do it is in the constructor. The whole code should look like this:

2.你不能像那样声明组件的状态。它必须在构造函数中完成。此外，如果您想引用 SocialPost this，则必须绑定它。Imo 最好的地方是在构造函数中。整个代码应该是这样的：

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

回答by Alexander Vitanov

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)}

回答by Ilya Novojilov

<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

如果你想在函数中使用 THIS 应该是这样

回答by Kenji Mukai

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)

并添加 .bind(this)