web-dev-qa-db-ja.com

ReactJS-onFocusとonBlurを機能させる方法

私が理解しているように、入力ボックスがクリックされたときに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
  1. コンポーネントがレンダリングされるときに、クリック/クリック解除する前にonFocusとonBlurが呼び出されるのはなぜですか？
  2. このonFocusとonBlurを機能させるにはどうすればよいですか？アクティブ化された入力ボックスに焦点を合わせる別の方法はありますか？
javascriptreactjsonchangeonblur
2
Kevin Danikowski
  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
7
P. Zietal

変化する

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

に

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

または

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

ここでメソッドを実行しています

_<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)を追加します

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

関数でこれを使用したい場合は、このようにする必要があります

1
Ilya Novojilov