Мое приложение имеет представление списка, отображающее список элементов.Как получить доступ к значениям дочерних компонентов (в ListView) в родительском компоненте в React Native
Каждый щелчок моего ребенка компонента вызывает изменение государственного значения
{ 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, ...}'. –