[英]How to access child components value (in a ListView) in parent component in React Native
我的应用程序具有一个呈现项目列表的列表视图。
我的子组件的每次点击都会触发状态值的更改
{ selected: !this.state.selected }
在上图中,我选择了2个子项,如何在父组件中访问它们的值?
例如,
Big Data: true
IoT: true
这是我的父母片段,也托管在Github上
import InterestItem from './InterestItem';
class AddInterest extends Component {
componentWillMount() {
this.createDataSource(this.props);
}
componentWillReceiveProps(nextProps) {
this.createDataSource(nextProps);
}
createDataSource({ items }) {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.dataSource = ds.cloneWithRows(items);
}
//return arrays of event from events
renderRow(item) {
return <InterestItem item={item} icon={computer} />;
}
render() {
const { centerEverything, skeleton, container, textContainer, contentContainer, listViewContainer,
titleContainer, descContainer, title, desc, submitContainer, submitTitle } = styles;
return (
<View style={[container]}>
<View style={[centerEverything, textContainer]}>
<View style={titleContainer}>
<Text style={[title]}>What kind of events are you interest in?</Text>
</View>
<View style={descContainer}>
<Text style={[desc]}>You'll see more events from the categories you choose.</Text>
</View>
</View>
<View style={[contentContainer]}>
<ListView
enableEmptySections
contentContainerStyle={listViewContainer}
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
</View>
<View style={[centerEverything, {paddingBottom: 10}]}>
<View style={[centerEverything, submitContainer]}>
<Text style={submitTitle}>Submit</Text>
</View>
</View>
</View>
)
}
}
这是我的子组件,也托管在GitHub上
class InterestItem extends Component {
state = {
selected: false
}
render() {
const { skeleton, centerEverything, container, textStyle } = styles;
return(
<TouchableWithoutFeedback onPress={() => this.setState({ selected: !this.state.selected })}>
<View style={[centerEverything, container, { backgroundColor: this.state.selected ? '#635eb4' : '#e7e7e7'}]}>
{this.props.icon}
<Text style={textStyle}>{this.props.item[0]}</Text>
</View>
</TouchableWithoutFeedback>
)
}
}
在@ free-soul之后,我将对您的代码进行以下修改:
constructor(){
this.state = {
//...
rowStates: {} // Holds the state for each row, identified by the uid property (I'm assuming it is unique, otherwise use some other value)
}
this.renderRow = this.renderRow.bind(this);
this.rowUpdated = this.rowUpdated.bind(this);
}
renderRow(item) {
// Adds a callback so that we know when an element has been pressed
return <InterestItem item={item} icon={computer} onPress={() => this.rowUpdated(item)}/>;
}
rowUpdated(item){
let rowStates = {...this.state.rowStates}; // Make a copy of the object
rowStates[item.uid] = !rowStates[item.uid]; // If the item is not in the object, !undefined will be evaluated, which results in true, so the operation is safe
this.setState({rowStates});
}
然后,您的子组件应如下所示:
class InterestItem extends Component {
state = {
selected: false
}
render() {
const { skeleton, centerEverything, container, textStyle } = styles;
return(
<TouchableWithoutFeedback onPress={() => {this.setState({ selected: !this.state.selected }); if(this.props.onPress) this.props.onPress(this.props.item)}}>
<View style={[centerEverything, container, { backgroundColor: this.state.selected ? '#635eb4' : '#e7e7e7'}]}>
{this.props.icon}
<Text style={textStyle}>{this.props.item[0]}</Text>
</View>
</TouchableWithoutFeedback>
)
}
}
希望能帮助到你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.