如何在 Storybook Story 中将焦点设置为输入

Question

我正在创建故事书 React 组件并尝试将焦点设置到故事的输入上。我不想在每个故事上都设置它。到目前为止我有：

const InputComponent = React.forwardRef(({
  inputName,
  value,
}, myRef) => {

  return (
    <input
      name={inputName}
      ref={myRef}
      type='text'
    />
  )
}  

stories.add(
  "Input field - Active",
  () => (
    <InputComponent
      inputName='Name'
  )
);

我不知道是否需要使用参考。我尝试使用 autoFocus 并将其设置为 true 作为道具，但这没有用。任何帮助表示赞赏。

Answer 1

我漏掉了一些小东西。我把 ref 道具放在了错误的位置。它应该在具有 inputName 和 value 的对象中。一旦我搬进去，我就可以在故事上使用反应钩子 useRef 和 useEffect 来集中输入，如下所示：

stories.add(
  "Input field - Active",
  () => React.createElement(() => {
    const newRef = useRef(null);
    useEffect(() => {
      newRef.current.focus();
    });
    return ( 
    <InputComponent
      inputName='Name'
      myRef={newRef}
    />
    )
})
);

如何在 Storybook Story 中将焦点设置为输入

How to set focus to input in Storybook Story

ref

reactjs

storybook