javascript - 使用 refs 生成并聚焦到平面列表中的特定文本输入
问题描述
我在反应原生组件中呈现了多个文本输入和图标元素的平面列表。我想要实现的是单击任何编辑图标,我需要关注相应的文本输入。根据过去的经验,我知道使用 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>
)
}
专注于输入的功能:
editName = (name,index) => {
this.inputRef[name].focus();
}
错误:无法设置未定义的属性“someName”。该应用程序甚至在 onClick 事件发生之前就崩溃了。
谢谢!
解决方案
我不会和这个bind
功能混在一起。
如果您通过它们来识别您的输入,请在应用该功能name
时也坚持这一点:editName
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>
);
}
您也可以在线查看
推荐阅读
- python - 有没有办法递归地编写这个函数?
- qt - Qt Design:两个 QDockWidgets 在规定的布局
- javascript - 如何仅使用javascript从innerHTML中选择一个元素
- reactjs - 在使用反应钩子渲染之前调度 redux 操作
- xamarin - 如何创建一个特定的类来打开 NavigationPages 的详细信息?
- c - 如何从另一个函数打印变量?
- stream - 从 kinesis 流中读取数据失败
- javascript - 如何使用javascript设置边框样式?
- git - 如何删除 git 中已经存在的目标路径?
- node.js - 如何使用 Mongodb 对一个数组中具有不同值的特定属性的同名文档进行分组?