Question

我正在尝试在本机中创建一个Listview，每行都有一个复选框和一个正文文本。为此，我使用的是nativebase包。 http://nativebase.io/docs/v2.0.0/components#checkbox

我遇到一些问题，当我点击复选框时，复选框不会将状态更改为false。当我点击复选框时，如何从正文中获取值？

import React, { Component } from 'react';
import { Container, Content, List, Body, ListItem, Text, CheckBox } from 'native-base';

class ListExample extends Component {
  state = {
    pressed: true,
    value: ""
  };

  onCheckBoxPress() {
    console.log(this);
    this.setState({ pressed: false});
    this.setState({ value: BODYVALUE});
  }

  render() {
    var items = [ "test1", "test2", "test3", "test4", "test5", "test6" ];
    return (
      <Container>
      <Content>
          <List dataArray={items} renderRow={(data) =>
              <ListItem>
                <CheckBox onPress={this.onCheckBoxPress.bind(this)} checked={this.state.pressed} />
                <Body>
                  <Text>{data}</Text>
                </Body>
              </ListItem>
          } />
      </Content>
  </Container>
    );
  }
}

export default ListExample;

Answer 1

我不相信列表会重新呈现，除非它给出了新数据，尝试这样做：

class ListExample extends Component {
  state = {
    pressed: true,
    value: ""
    list: [ "test1", "test2", "test3" ]
  };

  onCheckBoxPress = (value) => {
    console.log(this);
    this.setState({ pressed: false, value, list: ["test4", "test5", "test6"]});
  }

  render() {
    return (
      <Container>
      <Content>
          <List dataArray={this.state.list} renderRow={(data) =>
              <ListItem>
                <CheckBox onPress={() => this.onCheckBoxPress(data)} checked={this.state.pressed} />
                <Body>
                  <Text>{data}</Text>
                </Body>
              </ListItem>
          } />
      </Content>
  </Container>
    );
  }
}

Answer 2

我有类似的问题，在我的情况下，我需要保存所选行的ID，这是适用的解决方案。

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ListView
} from 'react-native';
import { typography } from 'react-native-material-design-styles';
import { Container, Content, Item, List, CheckBox, Body, ListItem, Text } from 'native-base';
import ItemLot from './item.js';

export default class LotsListDevolutionClient extends Component {
  state = { 
    lots: [
      {
        id: 1,
        serie: 'sorteo',
        almacen: 'principal',
        inicio: 1,
        fin: 50
      },
      {
        id: 2,
        serie: 'sorteo',
        almacen: 'principal',
        inicio: 51,
        fin: 100
      }
    ],
    selectedLots: [],
    token: ''
  };

  onCheckBoxPress(id) {
    let tmp = this.state.selectedLots;

    if ( tmp.includes( id ) ) {
      tmp.splice( tmp.indexOf(id), 1 );
    } else {
      tmp.push( id );
    }

    this.setState({
      selectedLots: tmp
    });
    console.warn('selected: ', this.state.selectedLots)
  }

  _renderItem(item){
    return (
      <View style={styles.row}>
        <CheckBox checked={item.check} onPress={() => this.onCheck(item)} />
        <Item lot={item}/>
      </View>
    )    
  }

  render() {
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    return (
      <Container>
        <Content style={styles.content}>
          <Text style={[typographyStyle.paperFontTitle, {alignSelf: 'center'}]}>Seleccione los lotes</Text>
          <Item>
            <ListView
              enableEmptySections={true} 
              dataSource={ds.cloneWithRows(this.state.lots)}
              renderRow={(item) =>
                <ListItem style={styles.listItem}>
                  <CheckBox
                    checked={this.state.selectedLots.includes(item.id) ? true : false}
                    onPress={()=>this.onCheckBoxPress(item.id)}
                  />
                  <ItemLot lot={item}/>
                </ListItem>
              }
            />
          </Item>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: { 
    flex: 1,
    backgroundColor: 'white'
  },
  row:{
    flexDirection: 'row',
   justifyContent: 'flex-start'
  },
  listItem: {
    backgroundColor: '#DFDFDF',
    elevation: 5,
    margin: 4
  },
  content: {
    flexDirection: 'column'
  }
});

const typographyStyle = StyleSheet.create(typography);

反应本机列表视图

2 个答案: