Как вызвать дочерний метод в ReactJS функциональном компоненте

Question

У меня есть несколько встроенных полей редактирования, нажатие на «Сохранить» должно запускать дочерний метод, который выполняет вызов API с другими свойствами. В настоящее время используется useState для установки флага, но он работает только один раз, если я повторно отправлю его, он не работает, вместо этого я хочу использовать метод.

Answer 1

Просто хотел добавить ответ, который постоянно работает с useState. Хитрость заключается в том, чтобы использовать постоянно меняющееся значение вместо логического и предпринимать действия при изменении значения:

function Parent() {
  const [signal, setSignal] = useState()

  const onClick = () => setSignal(Date.now()) // trigger the child to save

  return (
    <div>
      <Child signal={signal} />
      <button onClick={onClick}>Save</button>
    </div>
  }
}

function Child({signal}) {
  // send the data whenever signal changes
  useEffect(() => {
    if (signal != null) {
      sendData()
    }
  }, [signal])

  return <div>...</div>
}

Answer 2

Из документации :

useImperativeHandle

js useImperativeHandle(ref, createHandle, [deps])

useImperativeHandle настраивает значение экземпляра, которое предоставляется родительскому элементу компоненты при использовании ref. Как всегда, в большинстве случаев следует избегать императивного кода, использующего ссылки. useImperativeHandle следует использовать с forwardRef:

useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }   }));   return <input ref={inputRef} ... />; }

FancyInput = forwardRef(FancyInput);

В этом примере родительский компонент, который отображает <FancyInput ref={inputRef} />, сможет вызывать inputRef.current.focus().