프로그래밍 방식으로 포커스 입력에 반응하는 방법

프로그래밍 방식으로 포커스 입력에 반응하는 방법

매우 간단한 사용 사례인 UI 기능을 구현하려고 합니다.

1. 내용물이 들어 있는 라벨이 있습니다.
2. 클릭하면 텍스트 입력이 사용 가능한 라벨의 내용으로 대체됩니다.
3. 사용자는 콘텐츠를 편집할 수 있습니다.
4. Enter 키를 누르면 입력이 숨겨지고 업데이트된 내용과 함께 레이블이 반환됩니다.

드디어 (사실 MongoBD 백엔드, 레덕스 등을 사용하여) 모든 것을 정확하게 할 수 있었고, 유일하게 할 수 없었던 것(구글 검색과 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>

그러나 자동 포커스는 확실히 작동하지 않았습니다(양식이 렌더링되어 있지만 숨겨진 상태이기 때문에 자동 포커스를 사용할 수 없기 때문에 "추측"했습니다).

다음으로, 다음과 같이 시도했습니다.updateWor, 구글과 S.O.F.에서 찾은 많은 제안:

this.refs.updateTheWord.focus();

비슷한 제안도 있었지만 모두 효과가 없었습니다.그리고 리액트를 속여보고 뭔가 할 수 있는지 알아보려고 했어!실제 DOM 사용:

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

그것도 효과가 없었어요.한 가지 말로 표현할 수 없는 것은 다음과 같은 제안입니다. "ref"를 메서드로 사용하는 것("추측") 저는 이러한 컴포넌트가 여러 개 있고 컴포넌트당 가치를 더 얻기 위해 ref가 필요하기 때문에 시도조차 하지 않았습니다.그리고 제 ref가 명명되지 않으면 어떻게 가치를 얻을 수 있을지 상상도 할 수 없었습니다.

(라벨을 교환하는 단일 입력 상자가 필요하기 때문에) 폼을 사용하지 않을 경우 CSS(부트스트랩) 클래스가 '숨김'이 없어졌을 때 포커스를 어떻게 설정할 수 있는지 이해시켜 주시겠습니까?

참조를 사용하는 방법이 가장 선호되는 방법이 아닙니다.그렇지 않으면 더 이상 베스트 프랙티스가 아닙니다.이런 방법을 시도해 보십시오.

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.3 이상에서는 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>
    );
  }
}

React 18.xx 이상에서는 후크를 사용할 수 있습니다.

import React, { useRef } from "react";

export const Form = () => {
  const inputRef = useRef(null);

  const focus = () => {
    inputRef.current.focus();
  };

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

자동 포커스 애트리뷰트를 추가하기만 하면input(물론 들어가 있습니다)

<input autoFocus ...

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

자세한 데모를 보려면 여기를 클릭하십시오.

앞서 말한 답변 외에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임의의 요소에 대한 핸들러

@BenCarp의 답변(타자기본)

「 」를 .inputRef input 하면 돼setFocus점을맞맞 맞맞맞다다

export const useInputFocus = (): [MutableRefObject<HTMLInputElement | undefined>, () => void] => {
  const inputRef = useRef<HTMLInputElement>();
  const setFocus = (): void => {
    const currentEl = inputRef.current;
    if (currentEl) {
      currentEl.focus();
    }
  };
  return [inputRef, setFocus];
};

componentDidUpdate

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

"하여 입력 참조한 후 "useRef"를할 수 .reference.current.focus()

언급URL : https://stackoverflow.com/questions/43145549/how-react-programmatically-focus-input