时间戳

首页 > 解决方案 > 在 react-native 中管理多个 TextInputs (超过 10+)

javascript - 在 react-native 中管理多个 TextInputs (超过 10+)

问题描述

在我的 React Native 应用程序中，会有很多 TextInput，当用户按下返回按钮时，我希望 react 专注于下一个 TextInput。以前的 stackoverflow 线程建议使用 refs，但只有 2 个 TextInputs 的示例。创建 30 多个参考和处理焦点的最有效方法是什么？

带有常规旧 js 的 React Native 0.59。

标签： javascriptreactjsreact-native

解决方案

我正在使用这个插件 https://github.com/gcanti/tcomb-form-native 它允许我将输入作为数组传递，因此可以轻松地操作数组并动态设置焦点。您可以执行以下操作，首先安装库

npm install tcomb-form-native

然后导入库并设置您的输入

var t = require('tcomb-form-native');
var Person = t.struct({
  name: t.String,              // a required string
  surname: t.maybe(t.String),  // an optional string
  age: t.Number,               // a required number
  rememberMe: t.Boolean        // a boolean
});

现在您可以通过数组自定义字段选项。请注意，我只是添加了一个名为“next”的键，这将允许我循环遍历数组并动态关注下一个输入componentDidMount

let options = {
  fields: {
    name: {
      returnKeyType: "next",
      next: "surname"
    },
    surname: {
      returnKeyType: "next",
      next: "age"
    },
    age: {
      returnKeyType: "next",
      next: "rememberMe"
    },
    rememberMe: {
      returnKeyType: "done",
      next: "rememberMe"
    }
  }
};

现在这里是魔术，我们只需要循环数组并为每个输入动态添加焦点函数

Object.keys(options.fields).forEach(function(key) {
   if ("next" in options.fields[key]) {
    if (key == options.fields[key]["next"]) {
      //set the blur in case the input is the last input
      options.fields[key].onSubmitEditing = () => {
       self.refs["form"].getComponent(key).refs.input.blur();
     };
    }else{
      //set the next focus option
      options.fields[key].onSubmitEditing = () => {
       self.refs["form"].getComponent(options.fields[key]["next"]).refs.input.focus();
     };
    }
   }
 })
self.setState({
 options: options
});

然后在渲染部分你应该能够传递字段和选项

 <Form
  ref="form"
  type={Person}
  options={this.state.options}
  value={this.state.value}
/>

这应该动态工作，而不必担心您有多少输入。

希望这能回答你的问题！

推荐阅读