我的应用程序有一个列表视图,用于呈现项目列表。如何访问React Native中父组件中的子组件值(在ListView中)
我的子组件的每点击触发状态值
{ selected: !this.state.selected }
在图像的变化上面我选择了2个个子项目,我怎么可以访问我的父组件自己的价值?
例如,
Big Data: true
IoT: true
这是我的父母片段,Hosted on Github too
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>
)
}
}
这是我的孩子组成,Hosted on GitHub too
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>
)
}
}
在从@freesoul要求,这里的儿童实例(考虑到我有8个孩子)
考虑一个'InterestItem'实例,可以是'this.props.item'的值是什么?你能举一个例子吗? –
@ free-soul我已经添加了所需的信息 –
我的建议是,你应该保持在你父母的孩子的状态;像'state = {cars:false,bigData:true,hackintosh:false,iot:true,...}'。 –