web-dev-qa-db-ja.com

プログラム的にフォーカス入力に反応する方法

私は非常に単純なユースケース、UI機能を実装しようとしています。

  1. いくつかのコンテンツを含むラベルがあります
  2. クリックすると、テキスト入力により、使用可能なラベルのコンテンツに置き換えられます
  3. ユーザーはコンテンツを編集できます
  4. Enterキーを押すと、入力が非表示になり、更新されたコンテンツでラベルが戻ります

最終的にすべてが正しくなりました（実際にはMongoBDバックエンド、リデュースなど）。そして、私ができなかった唯一のこと（グーグルで1日を支払い、S.O.F同様の投稿を読んで）はこれでした：

テキスト入力が表示されると、フォーカスを転送できません！最初にこのように疲れました：

<div className={((this.state.toggleWordEdit) ? '' : 'hidden')}>
<input id={this.props.Word._id} className="form-control"
        ref="updateTheWord" 
        defaultValue={this.state.Word}
        onChange={this.handleChange}
        onKeyPress={this.handleSubmit}
        autoFocus={this.state.toggleWordEdit}/></div>
    <div className={((this.state.toggleWordEdit) ? 'hidden' : '')}>
      <h3 onClick={this.updateWord}>
        {this.state.Word}</h3>
    </div>

しかし、autoFocusは確かに機能しませんでした（フォームがレンダリングされるため「推測」されますが、非表示の状態なので、autoFocusは役に立たなくなります）。

次に、this.updateWorで試しました。GoogleやS.O.Fで見つけた提案の多くです。

this.refs.updateTheWord.focus();

同様の提案と一緒にすべてが機能しませんでした。また、Reactをだまそうとして、何かできるかどうかを確認しました。私は実際のDOMを使用しました：

    const x = document.getElementById(this.props.Word._id);
    x.focus();

そしてそれも機能しませんでした。 Wordに入れることさえ理解できなかったことの1つは、次のような提案です。 メソッドとしてrefを持っている（I "guess"） これらのコンポーネントが複数あるため、試してさえいませんでした。コンポーネントごとにさらに値を取得するにはrefが必要です。また、refに名前が付けられていない場合、どのように値を取得できるか想像できませんでした。

フォームを使用していない場合（ラベルを置き換える単一の入力ボックスが必要なため）、CSS（ブートストラップ）クラスが失われているときにフォーカスを設定する方法を理解するのに役立つアイデアを教えてください隠してください？

reactjsinputfocus
27
Adrian Adaine

Refの使用方法は、最も推奨される方法ではなく、ベストプラクティスでもありません。このようなことを試してください

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    this.textInput.current.focus();
  }

  render() {

    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}

更新
React 16.以降ではReact.createRef() APIを使用できます

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focus = this.focus.bind(this);
  }

  focus() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}
31
TRomesh

autofocus 属性をinputに追加するだけです。 （もちろんJSXではautoFocus）

<input autoFocus ...
4
Mehdi Dehghani

コンポーネントを更新するたびにcomponentDidUpdateメソッドを使用します

componentDidUpdate(prevProps, prevState) {
     this.input.focus();
}
1
Faraz Ahmed

useFocusフック

// General Focus Hook
const useFocus = (initialFocus = false, id = "") => {
    const [focus, setFocus] = useState(initialFocus)
    const setFocusWithTrueDefault = (param) => setFocus(isBoolean(param)? param : true)
    return ([
        setFocusWithTrueDefault, {
            autoFocus: focus,
            key: `${id}${focus}`,
            onFocus: () => setFocus(true),
            onBlur: () => setFocus(false),
        },
    ])
}


const FocusDemo = () => {

    const [labelStr, setLabelStr] = useState("Your initial Value")
    const [setFocus, focusProps] = useFocus(true)

    return (
        <> {/* React.Fragment */}
            <input
                onChange={(e)=> setLabelStr(e.target.value)}
                value={labelStr}
                {...focusProps}
            />
            <h3 onClick={setFocus}>{labelStr}</h3>
        </>
    )

}

より完全なデモについては、[ここをクリック] [1]をクリックしてください。

0
Ben Carp

以前の回答に加えて、setTimeoutを追加して機能させました

handleClick() {


    if (this.searchInput) {
        setTimeout(() => {

            this.searchInput.focus();

        }, 100);
    }
}

ここで、searchInputは入力のjsx refです。

<input
      type="text"
      name="searchText"
      ref={(input) => { this.searchInput = input; }}
      placeholder="Search" />

handleClick()は任意の要素に対するonClickハンドラーです

0
Ali Kleit