[英]How To Add More component dynamically React Native
I want to add more components after clicking on the button.单击按钮后,我想添加更多组件。 Can you share code or an idea so that I can implement?您可以分享代码或想法以便我可以实施吗? As the image shows, every time when user click on the add button, one row / component will be added.如图所示,每次用户单击添加按钮时,都会添加一行/组件。
It's where state
shining of,是state
闪耀的地方,
for example:例如:
constructor(props) {
super(props);
this._handleAddButton = this._handleAddButton.bind(this);
this.state = { /* initial your state. without any added component */
data: []
}
}
_handleAddButton() {
let newly_added_data = { title: 'new title', content: 'new content goes here' };
this.setState({
data: [...this.state.data, newly_added_data]
});
}
render() {
let added_buttons_goes_here = this.state.data.map( (data, index) => {
return (
<MyComponent key={index} pass_in_data={data} />
)
});
return (
<View>
<Button title="Add more" onPress={this._handleAddButton} />
{added_buttons_goes_here}
</View>
);
}
So every time you click the button,所以每次你点击按钮时,
<MyComponent>
added into View and show更多<MyComponent>
添加到视图和显示================ ================
2017/8/3 edited: 2017/8/3 编辑:
if you want to further delete <MyComponent>
, the prop key
should be taken care of.如果您想进一步删除<MyComponent>
,则应注意 prop key
。 The key
act as change detector for react framework, an auto-increment key would suit your case. key
充当反应框架的更改检测器,自动增量键适合您的情况。 example:例子:
_handleAddButton() {
let newly_added_data = {
/* psedo code to simulate key auto increment */
key: this.state.data[this.state.data.length-1].key+1,
title: 'new title',
content: 'new content goes here'
};
this.setState({
data: [...this.state.data, newly_added_data]
});
}
_handleRemoveButton(key) {
let result = this.state.data.filter( (data) => data.key !== key );
this.setState({
data: result,
});
}
render() {
let added_buttons_goes_here = this.state.data.map( (data, index) => {
return (
<MyComponent key={data.key} pass_in_data={data}>
/// psedo code of pass-in remove button as a children
<Button title="Remove" onPress={ () => this._handleRemoveButton(data.key) } />
</MyComponent>
)
});
return (
<View>
<Button title="Add more" onPress={this._handleAddButton} />
{added_buttons_goes_here}
</View>
);
}
I think you may be asking like adding task in todo app.我想你可能会问在 todo 应用程序中添加任务。 My answer is as follows.我的回答如下。 In the beginning, there is an array as data with three items as I stored in the state of the component and those 3 items are displaying in the screen.一开始,有一个数组作为数据,其中包含三个项目,因为我存储在组件的状态中,并且这 3 个项目显示在屏幕上。 Then I use a modal to take the input from the user and store that input as newInput in the state of the component.然后我使用模态从用户那里获取输入并将该输入存储为组件状态中的newInput 。 Then I used a button to add that newInput to the data in handleModalClick function.然后我使用一个按钮将该newInput添加到handleModalClick函数中的数据中。 Then the newInput value is added to the data array.然后将newInput值添加到数据数组中。 The all the elements in the data array are displaying on the screen.数据数组中的所有元素都显示在屏幕上。
import React, { Component } from "react"; import { SafeAreaView, View, FlatList, StyleSheet, Text, TextInput, Button, Modal, TouchableHighlight, Alert, TouchableOpacity } from "react-native"; import Constants from "expo-constants"; import uuid from "uuid/v1"; import { Ionicons } from "@expo/vector-icons"; export class Test extends Component { constructor(props) { super(props); this.state = { data: [ { id: 1, title: "First Item" }, { id: 2, title: "Second Item" }, { id: 3, title: "Third Item" } ], modalVisible: false, newInput: "" }; } setModalVisible(visible) { this.setState({ modalVisible: visible }); } handleModalClick = () => { this.setState( { data: [...this.state.data, { id: uuid(), title: this.state.newInput }] }, this.setState({ newInput: "" }) ); }; render() { return ( <SafeAreaView style={styles.container}> <FlatList data={this.state.data} renderItem={({ item }) => ( <View style={styles.item}> <Text style={styles.title}>{item.title}</Text> </View> )} keyExtractor={item => item.id} /> <View style={{ marginTop: 22 }}> <Modal animationType="slide" transparent={false} visible={this.state.modalVisible} onRequestClose={() => { Alert.alert("Modal has been closed."); }} > <View style={{ marginTop: 22 }}> <View> <TextInput placeholder="ENTER" onChangeText={text => { this.setState({ newInput: text }); }} value={this.state.newInput} /> <Button title="click" onPress={this.handleModalClick} /> <TouchableHighlight onPress={() => { this.setModalVisible(!this.state.modalVisible); }} > <Ionicons name="md-close-circle" size={50} color="red" /> </TouchableHighlight> </View> </View> </Modal> <TouchableOpacity onPress={() => { this.setModalVisible(true); }} > <Ionicons name="md-add-circle" size={100} color="violet" /> </TouchableOpacity> </View> </SafeAreaView> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: Constants.statusBarHeight }, item: { backgroundColor: "#f9c2ff", padding: 10, marginVertical: 8, marginHorizontal: 16 }, title: { fontSize: 18 }, input: { borderWidth: 2 } }); export default Test;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.