使用redux-form按下下一个键盘按钮后如何使用useRef钩子选择下一个TextInput

Posted 2023-04-18

【中文标题】使用redux-form按下下一个键盘按钮后如何使用useRef钩子选择下一个TextInput

【英文标题】：How to use useRef hook to select next TextInput after pressing next keyboard button with redux-form

【发布时间】：2019-09-09 12:31:54

【问题描述】：

我知道我们可以使用 react 类方法轻松做到这一点。因为我们有 this.ref。 但我不确定如何在功能组件中使用 useRef 挂钩。

使用here编写的技巧

这就是我尝试这样做的方式。

  ...

  const inputEl1 = useRef(null);
  const inputEl2 = useRef(null);
  return (
        <Field
            name="first_name"
            component=MyTextInput
            placeholder="First name"
            ref=inputEl1
            refField=inputEl1
            onEnter=() => 
              inputEl2.current.focus();
            
          />
          />
          <Field
            name="last_name"
            placeholder="Last name"
            component=MyTextInput
            ref=inputEl2
            refField=inputEl2
          />
)
...

所以我需要将字段中的 ref 传递给 MyTextInput 并在 nextKeyPress 上我想关注第二个输入组件，即 inputEl2

// 我的文本输入

...
render() 
    const 
      input:  value, onChange, onBlur ,
      meta:  touched, error ,
      keyboardType,
      placeholder,
      secureTextEntry,
      editable,
      selectTextOnFocus,
      style,
      selectable,
      customValue,
      underlineColorandroid,
      autoFocus,
      maxLength,
      returnKeyType,
      onEnter,
      refField,
     = this.props;
    const  passwordVisibility, undelineColor  = this.state;

    return (
      <View style= marginVertical: 8 >
        <TextInput
          style=[
            height: 50,
            paddingLeft: 20,
            color: Colors.SECONDARY_COMMON,
          , style]
          onBlur=val => onBlur(val)
          keyboardType=keyboardType
          underlineColorAndroid=undelineColor
          placeholder=placeholder
          returnKeyType=returnKeyType || 'go'
          value=customValue || value.toString()
          onChangeText=onChange
          maxLength=maxLength
          onSubmitEditing=onEnter
          ref=refField
        />
)

【参考方案1】：

const inputEl2 = useRef(null);
<TextInput
        name="first_name"           
        placeholder="First name"
        onSubmitEditing=() => inputEl2.current.focus()
      />

<TextInput
        name="last_name"
        placeholder="Last name"
        ref=inputEl2
      />

它对我有用

【参考方案2】：

如果它是您尝试获取 ref 的子组件，则需要将 prop 作为其他名称而不是 ref 传递。

这个方法对我有用

对于钩子，使用引用来初始化引用。

const passwordInput = useRef(null);

为自定义组件的 ref prop 使用不同的名称，例如输入参考。

<CustomInput
  inputRef= passwordInput 
/>

子组件 - 将 ref 设置为自定义 ref 属性。

const CustomInput = props => 
  const  inputRef  = props;
  
  return ( <TextInput
     ...props 
    ref= inputRef 
  /> );
;

【参考方案3】：

如果孩子需要使用像<TextInput ref=refField... 中的 ref 之类的道具，那么该道具需要是 ref（而不是字符串）：

<Field refField=inputEl2 ...

【讨论】：

我也试过这个。仍然没有运气:(当我按下移动键盘上的下一个键时，它说。未定义不是对象（评估 inputEl2.currunt.focus。

您的代码中是否也有拼写错误currunt -> current？如果没有，请尝试创建一个 ***.com/help/mcve 示例，其中您 tried this as well - 问题很可能出在您尚未向我们展示的地方

是的，有一个错字。但我仍然得到 inputEl2.current.focus 不是一个函数。感谢分享上面的链接。也会读的。我猜 redux 表单的归档组件不会识别 useRef。因为他们的代码没有更新为钩子。如果我错了，请纠正我。这可能吗？我想根据反应文档，我现在正确使用它reactjs.org/docs/hooks-reference.html#useref