여기에 약간의 데모를 만들었습니다 : https://codesandbox.io/s/bold-meitner-r3wzq?file=/src/App.js
버튼을 클릭하여 첫 번째 라디오 버튼을 표시하고 초점을 맞추면 라디오 스타일이 적용되지 않습니다. 하지만 바로 뒤에 스페이스를 누르면 오른쪽 요소에 초점이 맞춰집니다.
이상한 점은 1ms 시간 초과 후 초점을 맞추면 예상대로 작동한다는 것입니다. 분명히 이것은 해결책 이라기보다는 해킹에 가깝습니다.
여기서 정말 간단한 것을 놓치고있는 것 같습니다. 어떤 도움이라도 좋을 것입니다!
감사!!
또는 복제에 필요한 모든 코드입니다.
import React from "react";
import styled from "styled-components";
import "./styles.css";
const { useRef, forwardRef, useState } = React;
const Button = ({ onClick }) => (
<button onClick={onClick}>Click me to show and focus radio buttons</button>
);
const Fieldset = styled.fieldset`
display: ${props => (props.isVisible ? "block" : "none")};
input {
:focus {
outline: 5px solid red;
}
}
`;
const RadioButtons = forwardRef(({ isVisible, legend }, ref) => (
<Fieldset isVisible={isVisible}>
<legend>{legend}</legend>
<label for="one">One</label>
<input ref={ref} type="radio" id="one" name="radios" />
<label for="two">Two</label>
<input type="radio" id="two" name="radios" />
</Fieldset>
));
export default function App() {
const [isVisible, setIsVisible] = useState(false);
const inputRef = useRef();
const focusInput = () => {
setIsVisible(true);
// This doesn't work as expected
inputRef.current.focus();
// This does - But it definitely doesn't feel like a "solution"
// setTimeout(() => {
// inputRef.current.focus();
// }, 1);
};
return (
<>
<Button onClick={focusInput} />
<RadioButtons
isVisible={isVisible}
ref={inputRef}
legend="Radio Legend"
/>
</>
);
}
다음 useEffect과 같이 후크 내부에 포커스 로그인을 배치해야 합니다.
export default function App() {
const [isVisible, setIsVisible] = useState(false);
const inputRef = useRef();
const focusInput = () => {
setIsVisible(true);
};
React.useEffect(() => {
if (isVisible) {
inputRef.current.focus();
}
}, [isVisible]);
return (
<>
<Button onClick={focusInput} />
<RadioButtons
isVisible={isVisible}
ref={inputRef}
legend="Radio Legend"
/>
</>
);
}
여기에 링크가 있습니다
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다