Question

我正在使用自定义输入元素，并希望在初始渲染后将焦点设置在该元素上。这是我的自定义输入元素：（虽然很简单）

import React from 'react';
import './Input.scss';

const input = (props) => (
    <input 
        type={props.inputtype} 
        className="input" 
        placeholder={props.hint}
        style={{width: props.width}} {...props}/>
);

export default input;

这就是我在功能组件中使用它的方式：

const SignupPopup = (props) => {

const inputEmailRef = useRef(null);
//...
useEffect(() => {
    inputEmailRef.current.focus();
}, []);

return ( 
   <Input
      inputtype="email"
      hint="Email"
      width="100%"
      id="inputemail"
      ref={inputEmailRef}
      value={email}
      required
      onBlur={emailBlurHandler}
      onChange={inputChangeHandler}
      />);
}

错误：

TypeError：无法读取null的属性“ focus”

我看到的所有示例和代码仅适用于本机<input ref={myRef} />元素，但是有什么方法可以在自定义输入元素或包装的输入元素中使用？

Answer 1

您应该使用React.forwardRef将ref传递到自定义组件中的本机input：

import React from 'react';
import './Input.scss';

const input = React.forwardRef((props, ref) => (
    <input 
        type={props.inputtype} 
        className="input" 
        placeholder={props.hint}
        style={{width: props.width}}
        ref={ref}
        {...props}
    />
));

export default input;

更多详细信息：-https://en.reactjs.org/docs/forwarding-refs.html

Answer 2

您必须使用React.forwardRef通过ref。

通过这种方式，您可以访问父级中任何React组件的引用。

const Input = React.forwardRef((props, ref) => (
     <input 
        ref={ref}
        type={props.inputtype} 
        className="input" 
        placeholder={props.hint}
        style={{width: props.width}} 
        {...props}
     />
));

Answer 3

我希望你已经解决了这个问题。我会将我的解决方案发布给未来遇到同样问题的人。如果您想检查它是如何工作的，答案附有一个功能代码片段。

在 React（在 v17.0.2 上测试）中，您可以使用 useRef 钩子来引用特定元素。在这种情况下，您需要

导入 useRef。这可以像这样完成：

import { useRef } from "react";

在您的组件内部（在 return 之前），您必须添加一个 const 来调用我们刚刚导入的 useRef 方法：

const inputRef = useRef();

然后，您必须将 inputRef 引用到一个元素：

<input
    ref={inputRef}
    placeholder="Enter a value"
/>

最后，您可以对该元素执行任何您需要的操作，就像像这样访问它一样 inputRef.current：

inputRef.current.select(); // or inputRef.current.focus(); in your case

'use strict';

const e = React.createElement;

const App = () => {


  const inputRef = React.useRef();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    inputRef.current.select();
    // you could also use inputRef.current.focus() if you only want to focus the input
  };
  
  return(
    <form onSubmit={handleSubmit}>
      <h2> useRef select input example </h2>
      <input
        placeholder="Other input that I dont want to focus"
      />
      <input
        ref={inputRef}
        placeholder="Enter a value"
      />
      <button
        type="submit"
      > 
        Submit
      </button>
    </form>  
  );

}


const domContainer = document.querySelector('#root');ReactDOM.render(e(App), domContainer);

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  padding: 10px 70px;
  text-align: center;
  color: #DDD;
  background-color: #222;
  }

form {
  padding: 0 20%;
  display: flex;
  flex-direction: column;
}

form * {
  margin-bottom: 0.5rem;

}

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="root"></div>

如何使用useRef和react挂钩在ReactJS中的自定义输入上设置焦点？

3 个答案: