使用 refs 生成并聚焦到平面列表中的特定文本输入

Question

我在反应原生组件中呈现了多个文本输入和图标元素的平面列表。 我想要实现的是单击任何编辑图标，我需要关注相应的文本输入。 根据过去的经验，我知道使用 refs 我们可以实现这一点。 但是，如何根据索引或任何其他值生成动态引用并关注相应的文本输入？

const renderItem = ({ item,index }) => {
  return (
    <View style={styles.item} key={index}>
      <View style={styles.data}>
        <TextInput
          value={item.name}
          ref={(input) => {
            this.inputRef[item.name] = input;
          }}
        />
        <TouchableOpacity onPress={this.editName.bind(this, item.name,index)}>
        <Icon
          name="pencil"
          size={20}
        />
        </TouchableOpacity>
      </View>
    </View>
  )
}

Function 聚焦到输入：

editName = (name,index) => {
  this.inputRef[name].focus();
}

错误：无法设置未定义的属性“someName”。 该应用程序甚至在 onClick 事件发生之前就崩溃了。

谢谢！

Answer 1

我不会与bind function 混在一起。

如果您通过name来识别输入，请在应用editName function 时坚持这一点：

function App() {
  const names = ['1', '2', '3'];
  const inputRef = useRef([]);

  // Note this returns a function, that uses the relevant `name` value
  const editName = (name) => () => inputRef.current[name].focus();

  return (
    <div className="App">
      {names.map((name) => (
        <div key={name}>
          <input
            type="text"
            ref={(input) => {
              inputRef.current[name] = input;
            }}
          />
          <button onClick={editName(name)}>{`Edit ${name}`}</button>
        </div>
      ))}
    </div>
  );
}

您也可以 在线查看