Question

我从NativeBase导入了CheckBox。单击复选框时，它会调用toggleCheckBox函数来添加或删除数组中的item.ids，并根据数组的内容将标志设置为true或false。

我可以看到toggleCheckBox函数正常工作，它正确地设置数组项目ID，点击CheckBox时标志也很好。但是，虽然正确调用了切换功能，但在单击复选框时不会检查ListItem中的复选框。

我还注意到日志＆＃34; MS CB2：＆＃34;在单击CheckBox之后打印列表正上方，但是List＆＃39; MS insideList中的日志：＆＃39;没有打印。我假设在调用toggleCheckBox函数后不会呈现List。这是代码：

class MSScreen extends Component {
    constructor(props){
        super(props);
        //this.toggleCheckbox = this.toggleCheckbox.bind(this);
        this.state = {
          isLoading: true,
          checkboxes : [],
          plans: {},
        };
    }

    componentDidMount(){
        console.log("MS inside componentDidMount");

        fetch('http://hostname:port/getData')
            .then((response) => {console.log('response'); return response.json();})
            .then((responseJson) => {console.log('responseData: '+responseJson); this.setState({isLoading : false, plans : responseJson}); return;})
            .catch((err) => {console.log(err)});  
    }

    toggleCheckbox(id) {
        let checkboxes = this.state.checkboxes;

        if(checkboxes && checkboxes.includes(id)){
          const index = checkboxes.indexOf(id);
          checkboxes.splice(index, 1);
        } else {
          checkboxes = checkboxes.concat(id);
        }

        this.setState({checkboxes});
        console.log("MS check a4: "+checkboxes && checkboxes.includes(id))
    }

    render() {

        if (this.state.isLoading) {
            return <View><Text>Loading...</Text></View>;
        }

        const plans = this.state.plans;
        const { params } = this.props.navigation.state.params;
        const checkboxes = this.state.checkboxes;
        console.log("MS CB1: "+checkboxes)

        return (
            <Container>
                <Content>
                    <View>
                        {console.log("MS CB2: "+checkboxes)}
                        <List
                            dataArray={plans.data}
                            renderRow={(item, i) => {
                                console.log('MS insideList : '+checkboxes && checkboxes.includes(item.id))
                                return(
                                <ListItem 
                                    key={item.id}
                                    >
                                    <Left>
                                        <CheckBox
                                            onPress={() => this.toggleCheckbox(item.id)}
                                            checked={checkboxes && checkboxes.includes(item.id)}                                            
                                            />
                                    </Left>
                                    <Text>
                                        {item.name}
                                    </Text>
                                </ListItem>)}}
                        />
                    </View>
                </Content>
            </Container>
        );
    }
}

如何在列表中检查CheckBox？

为了其他用户的利益，以下是基于Supriya在以下评论中提出的建议的代码修复：

解

<FlatList
    extraData={this.state}
    data={plans.data}
    keyExtractor={(item, index) => item.id}
    renderItem={({item}) => {
        const itemName = item.name;     
        return(
        <ListItem>
                <CheckBox
                    onPress={() => this.toggleCheckbox(item.id)}
                    checked={checkboxes && checkboxes.includes(item.id)}                                            
                    />
            <Body>
                <Text style={styles.planText}>
                    {item.name}
                </Text>
            </Body>
        </ListItem>)}}
/>

版本：

native-base@2.3.5

react-native@0.50.4

设备：Android

CRNA app with Expo

Answer 1

github上有一个类似的问题，https://github.com/GeekyAnts/NativeBase/issues/989有解决方案

Answer 2

它与没有listItem的简单代码一起使用。以下示例将复选框作为单选按钮进行处理，但是可以轻松更改onPress函数以允许多项选择。

import React, { Component } from 'react';
import { View } from 'react-native';
import { CheckBox, Text } from 'native-base';

export default class SignupScreen extends Component {

  state = {
    one: false,
    two: false,
    three: false
  };

  render() {
    return (
      <View style={{ alignItems: 'flex-start' }}>
        <View style={{ flexDirection: 'row' }}>
          <CheckBox checked={this.state.one}
            style={{ marginRight: 20 }}
            onPress={this.onePressed.bind(this)}/>
          <Text>One</Text>
        </View>
        <View style={{ flexDirection: 'row' }}>
          <CheckBox checked={this.state.two}
            style={{ marginRight: 20 }}
            onPress={this.twoPressed.bind(this)}/>
          <Text>Two</Text>
        </View>
        <View style={{ flexDirection: 'row' }}>
          <CheckBox checked={this.state.three}
            style={{ marginRight: 20 }}
            onPress={this.threePressed.bind(this)}/>
          <Text>Three</Text>
        </View>
      </View>
    );
  }

  // checkbox functions
  // if clicked button was set, only clear it
  // otherwise, set it and clear the others
  onePressed() {
    if (this.state.one)
      this.setState({ one: false });
    else
      this.setState({ one: true, two: false, three: false });
  }

  twoPressed() {
    if (this.state.two)
      this.setState({ two: false });
    else
      this.setState({ one: false, two: true, three: false });
  }

  threePressed() {
    if (this.state.three)
      this.setState({ three: false });
    else
      this.setState({ one: false, two: false, three: true });
  }
}

Native-Base - List中的CheckBox未被检查

2 个答案: