ReactJS - 如何让 onFocus 和 onBlur 工作 [英] ReactJS - How to get onFocus and onBlur to work

问题描述

据我所知，当输入框被点击时应该调用 onFocus ，当其他东西成为焦点时应该调用 onBlur .

我的意图:我想调用一个函数，当点击激活时，它会.concat焦点中输入框的消息字符串，但是我无法让 onFocus 或 onBlur 工作.

从我搜索的结果来看，这应该可以解决问题，但没有.

import React, { Component } from 'react'class SocialPost 扩展组件 {状态 = {消息:this.props.socialPost.message，焦点:假}_onBlur() {setTimeout(() => {如果(this.state.focus){this.setState({焦点:假，});}}, 0);}_onFocus() {如果(！this.state.focus){this.setState({重点:真实，});}}使成为() {返回 (
...<输入onFocus={this._onFocus()}onBlur={this._onBlur()}类型='文本'值={this.state.message}onChange={...}/>...
)}}导出默认 SocialPost

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

解决方案

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 扩展组件 {构造函数(道具){超级(道具)this.state = {消息:props.socialPost.message，焦点:假}this._onBlur = this._onBlur.bind(this)this._onFocus = this._onFocus.bind(this)}_onBlur() {setTimeout(() => {如果(this.state.focus){this.setState({焦点:假，});}}, 0);}_onFocus() {如果(！this.state.focus){this.setState({重点:真实，});}}使成为() {返回 (
...<输入onFocus={this._onFocus}onBlur={this._onBlur}类型='文本'值={this.state.message}onChange={...}/>...
)}}导出默认 SocialPost

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?

解决方案

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

这篇关于ReactJS - 如何让 onFocus 和 onBlur 工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！