samedi 25 mars 2017

Change checkbox state

I am trying to create a ListView with multiple rows. Each row have a checkbox + text. This is my implementation of a 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;

This is my implementation of a row:

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 };

Now I need create behavior on the checkbox. My goal is when a person click on the checkbox the box change the state to checked.

How can I do that ?




Aucun commentaire:

Enregistrer un commentaire