聚焦单选按钮时,React useRef / forwardRef无法正常工作

时间:2020-07-10 17:06:50

标签: reactjs use-ref react-forwardref

我在此处整理了一个小样: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"
      />
    </>
  );
}


2 个答案:

答案 0 :(得分:1)

似乎总是这样...感觉就像在用尽所有选择-然后写下问题,然后立即找到答案!

在这种情况下-将裁判焦点移到观看useEffect的{​​{1}}上就可以了

isVisible

仍然有兴趣查看是否可以通过更好的方法完成

答案 1 :(得分:1)

您必须将聚焦登录名放置在# ... your code ... plt.hist(results, bins=die) # or bins = 6 plt.ylabel('Count') plt.xlabel('Result'); plt.title("Mean results: " + str(np.mean(results))) plt.show() 钩子内

useEffect

这里是link