리액트 훅을 사용하여 다음 렌더링에 집중하는 방법

리액트 훅을 사용하여 다음 렌더링에 집중하는 방법

훅을 가지고 놀고 있는데, 다음을 하려고 합니다.

import React, { useState, useRef } from 'react';

const EditableField = () => {
  const [isEditing, setEditing] = useState(false);
  const inputRef = useRef();
  const toggleEditing = () => {
    setEditing(!isEditing);
    if (isEditing) {
      inputRef.current.focus();
    }
  };
  return (
    <>
      {isExpanded && <input ref={inputRef} />}
      <button onClick={toggleEditing}>Edit</button>
    </>
  );
};

이건 실패할 거야, 왜냐하면current컴포넌트가 아직 재실행되지 않았고 입력 필드가 아직 렌더링되지 않았기 때문에(따라서 아직 포커스를 맞출 수 없기 때문에)는 null입니다.

어떻게 하면 좋을까요?리액트 훅 FAQ에서 제안한 훅을 사용할 수 있지만, 이 방법은 매우 번거로운 해결 방법인 것 같습니다.

다른 방법이 있나요?

다음과 같은 경우 후크를 사용하여 모든 렌더 후에 함수를 실행할 수 있습니다.isEditing변경되었다.이 기능에서는, 다음의 경우에 체크할 수 있습니다.isEditing이true입력에 초점을 맞춥니다.

예

const { useState, useRef, useEffect } = React;

const EditableField = () => {
  const [isEditing, setEditing] = useState(false);
  const toggleEditing = () => {
    setEditing(!isEditing);
  };

  const inputRef = useRef(null);

  useEffect(() => {
    if (isEditing) {
      inputRef.current.focus();
    }
  }, [isEditing]);
  
  return (
    <div>
      {isEditing && <input ref={inputRef} />}
      <button onClick={toggleEditing}>Edit</button>
    </div>
  );
};

ReactDOM.render(<EditableField />, document.getElementById("root"));

<script src="https://unpkg.com/react@16.7.0-alpha.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.2/umd/react-dom.production.min.js"></script>
  
<div id="root"></div>

수락된 답변이 위의 질문에서 요청된 요소를 포함하는 것으로 알고 있습니다.

단, 기능 컴포넌트를 사용하고 있는 경우에는 다음 컴포넌트를 사용해 주십시오.React.forwardRef하위 구성요소에 대한 참조를 전달합니다.나중에 이 질문을 언급하는 사람에게 분명히 도움이 될 것이다.

좀 더 깔끔한 방법으로, 당신은 당신의 자녀 컴포넌트를 쓸 수 있습니다.ref다음과 같이 합니다.

    const InputField = React.forwardRef((props, ref) => {
        return (
            <div className={props.wrapperClassName}>
                <input 
                   type={props.type}
                   placeholder={props.placeholder} 
                   className={props.className}
                   name={props.name}
                   id={props.id}
                   ref={ref}/>
            </div>
        )
    })

또는 단순히 이 구성 요소를 사용합니다.

import { FC, useEffect, useRef } from 'react'

export const FocusedInput: FC<JSX.IntrinsicElements['input']> = (props) => {

    const inputRef = useRef<null | HTMLElement>(null)
    useEffect(() => {
        inputRef.current!.focus()
    }, [])
    return <input {...props} type="text" ref={inputRef as any} />
}

언급URL : https://stackoverflow.com/questions/53314857/how-to-focus-something-on-next-render-with-react-hooks