我正在尝试创建一个多行的 ListView。每行都有一个复选框+文本。这是我对 ListView 的实现:
class ListExample extends Component {
constructor() {
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(["hey1", "hey2", "hey3", "hey4"]),
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(data) => <Row data={data} />}
/>
);
}
}
export default ListExample;
这是我对一行的实现:
import React from 'react';
import { CheckBox } from 'native-base';
import { View, Text, StyleSheet} from 'react-native';
const Row = (props) => (
<View style={styles.container}>
<CheckBox onPress={props.onPress} checked={false} />
<Text style={styles.text}>
{ props.data }
</Text>
</View>
);
export { Row };
现在我需要在复选框上创建行为。我的目标是当一个人点击复选框时,该框将状态更改为选中。
我怎样才能做到这一点 ?
您可以使用 Row 组件的状态:
import React, { Component } from 'react';
import { CheckBox } from 'native-base';
import { View, Text, StyleSheet} from 'react-native';
class Row extends Component {
constructor(props) {
super(props);
this.state = { checked: false };
}
render() {
return (
<View style={styles.container}>
<CheckBox
onPress={() => this.setState({
checked: !this.state.checked
})}
checked={this.state.checked}
/>
<Text style={styles.text}>
{ props.data }
</Text>
</View>
);
}
}
export default Row;
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句