Как установить фокус для ввода в Storybook Story

Question

Я создаю компонент реакции сборника рассказов и пытаюсь сфокусировать внимание на материале истории. Я не хочу ставить это на каждой истории. Пока у меня есть:

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

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

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

Я не знаю, нужно ли мне использовать реф или нет. Я попытался использовать автофокус и установить его в качестве опоры, но это не сработало. Любая помощь приветствуется.

Answer 1

Я пропустил что-то маленькое. У меня был опора в неправильном месте. Это должно было быть в объекте с inputName и значением. Как только я переместился туда, я смог использовать ловушки реагирования useRef и useEffect на историю, чтобы сфокусировать ввод следующим образом:

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