ReactJS - 如何让 onFocus 和 onBlur 工作答案

【问题标题】：ReactJS - How to get onFocus and onBlur to workReactJS - 如何让 onFocus 和 onBlur 工作
【发布时间】：2017-10-23 19:09:28
【问题描述】：

据我了解，点击输入框时应调用onFocus，而当其他内容成为焦点时应调用onBlur。

我的意图：我想调用一个函数，当通过点击激活时，它将.concat焦点输入框的消息字符串，但我无法获得onFocus 或 onBlur 工作。

根据我发现的搜索结果，这应该可以解决问题，但没有。

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

为什么在我单击/取消单击之前渲染组件时会调用onFocus 和onBlur？
如何让onFocus 和onBlur 工作，是否有其他方法可以专注于激活的输入框？

【问题讨论】：

为什么你的状态没有在constructor函数中定义？
@ArupRakshit 我看过很多没有在构造函数内部的示例，并且阅读它是不必要的。我一直在以一种方式与另一种方式来解决问题，所以我就这样离开了。像所有建议的那样添加bind(this) 之后，现在this.state 从它被调用的位置是未定义的，我将添加构造函数并尝试以这种方式修复它
this 在构造函数内部和构造函数外部都有特殊含义。 react方式使用state，使用ES2015类时需要在构造函数内部。

标签： javascript reactjs onchange onblur

【解决方案1】：

调用它是因为你在渲染方法中运行函数，你应该传递函数，而不是它们返回的内容。

改变这个：

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

到这里：

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

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

【讨论】：

谢谢 P Zietal，您解决了我的问题。我不仅正确地调用了该函数，而且在设置状态以使用构造函数之后（起初不起作用），此后我没有绑定函数。我很感激！
这个答案也比其他答案好，因为我们在构造函数中绑定。如果您在构造函数之外绑定，就像其他一些答案一样，每次您的组件呈现时，它都必须再次运行该绑定函数，而不仅仅是在构造函数中运行一次。
不知道绑定。事情是我没有使用构造函数方法，因为我没有发现它有用。但是，如果根据 React 文档使用绑定（或状态初始化），则需要构造函数：reactjs.org/docs/react-component.html#constructor
感谢您的回答 - 在遇到这个问题很长一段时间后，这对我也有帮助感谢它！
在使用 React 之后，我仍然忘记了这一点，我什至搜索发现我的代码有什么问题，永远不会过时，无论如何感谢你的干净答案！

【解决方案2】：

改变

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

到

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

或

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

【讨论】：

在不使用.bind(this) 的情况下使用this 时，您需要胖箭头 才能使用this 代码。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你正在执行这里的方法

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

它应该没有括号。

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

编辑：

并添加.bind(this)

【讨论】：

this 不会指向组件的实例。您需要bind 或使用=> 访问this。