我在 react-native 应用程序的ScrollView中有我的页面。在第一次加载子组件时,可以说多次TextInput's
渲染非常好。
每个TextInput都有一个唯一的键。当我开始更新任何 TextInput 字段时,其他组件就会崩溃。折叠是指组件存在但不会显示任何数据。onPress 事件适用于折叠的组件,但文本不显示。
我发现的一种方法是在每个渲染上添加一个唯一的随机数key
,但随后TextInput的焦点丢失了,这不是一个好的用户体验。
代码:
class App extends React.Component {
constructor(props) {
super(props);
this.state= this.props;
}
buildList(data) {
_.map(data, blog => {
return(
<View key={blog.id}>
<Text>{blog.title}</Text>
<TextInput
placeholder={blog.label}
onChangeText={text => onChangeText(text)}
value={value}
/>
</View>
);
}
}
render() {
const {
data
} = this.state;
return (
<View style={mainStyles.pageWrap}>
<ScrollView style={mainStyles.contentWrap}>
<View>
{
this.buildList(
data
)
}
</View>
</ScrollView>
</View>
);
}
}