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