Question

我想为同一全局组件创建多个引用。像例如TextInput，如果我想添加引用到我使用。这在我的基于类的组件中：

 <TextInput
               
                  ref={input => {
                    this.secondTextInput = input;
                  }}
                
                />

，然后通过this.secondTextInput.focus();进行调用以集中文本输入。只要直接在我的课程中直接导入整个textInput即可。

如果ive在另一个文件（例如：

）中为TextInput创建了全局组件

export const OTPInput = props => {
  return (
    
      <TextInput
        placeholder={props.title}
        onChangeText={props.onTextEnter}
        value={props.value}
      
      />
   
  );
};

并在我的班级中通过像这样导入来使用它：

Class ABC extends Component{


render(){
return(
<>
<OTPInput title ="first otp" />
<OTPInput title ="another otp" />
</>
)

}

}

我该如何创建ref并传递它，以便可以通过单击类func中的某个按钮来使文本输入集中。

任何帮助都会很棒

Answer 1

Forwarding Refs

export const OTPInput = React.forwardRef((props, ref) => (
  <TextInput
    ref={ref}
    placeholder={props.title}
    onChangeText={props.onTextEnter}
    value={props.value}  
  />
));

然后按照您的示例用法，只需创建一个引用并附加

const OTPInputRef1 = React.createRef();

...

<OTPInput ref={OTPInputRef1} title ="first otp" />

Answer 2

您应该查看一下react文档中此处描述的转发引用 https://reactjs.org/docs/forwarding-refs.html

反应本地多重引用到全局组件

2 个答案: