My appにはアイテムのリストをレンダリングするリストビューがあります。親コンポーネント内の親コンポーネントの子コンポーネントの値(ListView内)へのアクセス方法ネイティブ
私は私の親コンポーネントでその値にアクセスする方法を、2つの項目を選択した上で、私の子コンポーネントのすべてのクリックは、状態値の変化画像で
{ selected: !this.state.selected }
をトリガ?例えば
、
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>
)
}
}
これは私の子コンポーネントである、@freesoulからの要請を受け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>
)
}
}
は、ここにあります子供のインスタンス(私は8人の子供がいると考える)@自由の魂にフォローアップ
'InterestItem'の一インスタンスを考えてみましょう。' this.props.item'の値は何ですか?あなたは例を投稿できますか? –
@ free-soulリクエストされた情報を追加しました –
私の提案は、あなたの親の子供の状態を維持することです。 'state = {cars:false、bigData:true、hackintosh:false、iot:true、...}'のようなものです。 –