ReactJS - 如何让 onFocus 和 onBlur 工作

IT技术 javascript reactjs onchange onblur
2021-05-26 08:19:21

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

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

从我搜索的结果来看，这应该可以解决问题，但事实并非如此。

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. 为什么onFocus和onBlur在之前我点击/取消勾选这些组件被渲染叫什么名字？
  2. 我如何获得这个onFocus并onBlur工作，是否有另一种方法可以专注于激活的输入框？
4个回答
  1. 之所以调用它，是因为您在 render 方法中运行该函数，您应该传递函数，而不是它们返回的内容。

改变这个：

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

改变 

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

到 

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

或者 

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

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

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

您正在此处执行该方法

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

其它你可能感兴趣的问题
上一篇重新编程 Marlin 以将止动销分配给任意任务 [Arduino Mega] 下一篇双热端中串联的两个 12 V 加热元件