React Native点击Next键聚焦下一个无状态输入框的实现方案

我懂你这个痛点！在Redux Form里用ref确实容易踩坑，因为Field组件会对自定义渲染组件做一层包装，直接拿ref根本碰不到底层的Input实例。我给你整理了一套可行的解决方案，亲测有效：

步骤1：为每个输入框定义独立的Ref #

首先在你的LoginForm类里，给邮箱和密码输入框分别声明ref，避免之前覆盖同一个变量的问题：

class LoginForm extends React.Component<Props, State> {
  // 定义两个独立的ref，分别对应邮箱和密码输入框
  emailInput: any;
  passwordInput: any;

  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      isLoading: false,
    }
  }
  // ... 其他代码
}

步骤2：修改renderInput方法，分配Ref并添加跳转逻辑 #

更新你的renderInput方法，根据输入框的name分配对应的ref，同时给邮箱输入框添加onSubmitEditing事件，触发密码框的聚焦。注意如果用的是Native Base的Input组件，需要访问内部的_root属性才能拿到原生TextInput实例：

renderInput({ input, disabled, meta: { touched, error, warning } }) {
  // 根据输入框名称绑定对应的ref
  const assignRef = (component) => {
    if (input.name === "email") {
      this.emailInput = component;
    } else {
      this.passwordInput = component;
    }
  };

  // 邮箱输入框点击next后，聚焦到密码框
  const handleNextFocus = () => {
    // 针对Native Base的Input组件，需要访问内部的原生TextInput实例
    this.passwordInput?._root?.focus();
  };

  return (
    <Item error={error && touched}>
      <Icon active name={input.name === "email" ? "person" : "unlock"} />
      <Input 
        ref={assignRef}
        placeholder={input.name === "email" ? "Email" : "Password"} 
        secureTextEntry={input.name === "password"} 
        editable={!disabled}
        returnKeyType={input.name === "email" ? "next" : "send"}
        keyboardType={input.name === "email" ? "email-address" : "default"}
        autoCapitalize="none"
        blurOnSubmit={false} // 必须保留，否则输入框会失焦
        onSubmitEditing={input.name === "email" ? handleNextFocus : undefined}
        {...input}
      />
    </Item>
  );
}

步骤3：（可选）改用Field的Render Prop方式增强灵活性 #

如果还是遇到ref无法绑定的问题，建议把Field的component属性改成render prop写法，这样能直接控制组件渲染，避免Field的包装层干扰ref：

// 替换原来的email Field
<Field 
  name="email" 
  disabled={isLoading} 
  validate={[email, required]} 
  onChange={(event, value) => this.setState({email: value})}
>
  {({ input, meta }) => (
    this.renderInput({
      input,
      disabled: isLoading,
      meta,
    })
  )}
</Field>

// 替换原来的password Field
<Field 
  name="password" 
  disabled={isLoading} 
  validate={[minLength8, maxLength15, required]} 
  onChange={(event, value) => this.setState({password: value})}
>
  {({ input, meta }) => (
    this.renderInput({
      input,
      disabled: isLoading,
      meta,
    })
  )}
</Field>

为什么原来的方法失效？ #

你之前把所有输入框的ref都赋值给同一个this.textInput，导致最后只有密码框的ref被保留；再加上Redux Form的Field组件会创建中间组件，使得ref根本无法指向真正的Input实例。现在的方案通过独立ref+定向跳转逻辑，完美解决了这两个问题。

内容的提问来源于stack exchange，提问作者dnwjn