如何在React Hooks中的父级上单击按钮时将焦点放在子级组件的输入上

问题描述

我有一个父组件，该组件有一个带有onClick事件的按钮，当发生错误时，我想重点关注子组件中的输入。我知道可以使用useRef完成此操作，但我一直收到未定义的错误。这是我的代码：

/* Parent Component */
const parent = () => {
  const acresRef = useRef();
  const addrRef = useRef();

  const acresFocus = () => {
    acresRef.current.focus();
  };

  const addressFocus = () => {
    addrRef.current.focus();
  };

  return (
    <Child addrRef={addrRef} acresRef={acresRef} />
    <button onClick={acresFocus} />
    <button onCLick={addressFocus} />
  )
}

/*Child Component*/
const Child = forwardRef(
  ({props},acresRef,addrRef) => (
  <div>
    <label for="address">Address</label>
    <input type="text" name="address" ref={addrRef} />
  </div>
  <div>
    <label for="acres">Acres</label>
    <input type="text" name="acres" ref={acresRef} />
  </div>
  )
);

解决方法

您在这里错误地使用了引用。将forwardRef传递给组件时，ref才能工作。除此之外的任何内容都是组件的支撑。因此，在您的情况下，子组件将在道具内收到acresRef和addrRef。

/*Child Component*/
const Child = (props) => (
  <>
    <div>
      <label htmlFor="address">Address</label>
      <input type="text" name="address" ref={props.addrRef} />
    </div>
    <div>
      <label htmlFor="acres">Acres</label>
      <input type="text" name="acres" ref={props.acresRef} />
    </div>
  </>
);

/* Parent Component */
const Parent = () => {
  const acresRef = React.useRef();
  const addrRef = React.useRef();

  const acresFocus = () => {
    acresRef.current.focus();
  };

  const addressFocus = () => {
    addrRef.current.focus();
  };

  return (
    <>
      <Child addrRef={addrRef} acresRef={acresRef} />
      <button onClick={acresFocus}>acres</button>
      <button onClick={addressFocus}>address</button>
    </>
  );
};

选中此codesandbox here。

,

您也可以像这样捆扎道具：

const Child = (props) => {
  const onClick = props.onClick;
  return(<div><p>
  {onClick()}
  </p>
  </div>
  );
}

/* Parent Component */
const ParentEl = () => {
  const onClick = ()=>{return "hi"};

  return (
    <div>
      <Child onClick={onClick} />
    </div>
  )
}

/*Child Component*/


export default function App() {
  return (
    <div className="App">
      <ParentEl />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

或codesandbox链接直接查看其作用：

https://codesandbox.io/s/hidden-water-s8qjj?file=/src/App.js

在这里： const onClick = props.onClick; 子组件中的所有功能都在发挥作用