反应原生列表视图

我想在原生反应中创建一个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;

来源

2017-03-24 lolix

我有同样的问题，任何解决方案lolix？ – neelima

我不相信名单将重新渲染，除非它给新的数据，尝试这样做：

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

来源

2017-03-25 00:06:22

当我点击复选框时，收到错误“list is not defined”：/ @Matt Aft – lolix

哦语法错了，改成：this.setState（{pressed：false，value，list：[“test4” ，“test5”，“test6”]}）;' –

对不起，但不起作用@Matt Aft – lolix

我也有类似的问题，在我的情况，我需要保存的的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);

来源

2017-09-13 02:55:54

反应原生列表视图

回答

相关问题