Reactjs I'；我的handleCheckBox功能有问题

我在每个复选框中添加了一个onPress函数，以将状态从“false”（目标名称）更改为“true”，但在编译代码时，复选框保持空白。我为复选框的名称设置了状态，然后我的handleCheckbox函数将e.target.name状态更改为！e、 target.checked，以false开头。 提前谢谢大家

import React, { Component } from "react";
import { Modal, View } from "react-native";
import {
     Container,
     Header,
     Content,
     Text,
     Right,
     Left,
     Button,
     List,
     ListItem,
     CheckBox
} from "native-base";

export default class FilterModal extends Component {
    constructor() {
       super();

       this.state = {
           modalVisible: false,
           catCalling: false,
           bigPuddle: false,
           scaffolding: false,
           sidewalkClosed: false,
           lightsOut: false,
           snowPiles: false
       };
     }

    handleCheckBoxes = e => {
         this.setState({ [e.target.title]: !e.target.checked });
     };

    openModal() {
         this.setState({ modalVisible: true });
     }

     closeModal() {
         this.setState({ modalVisible: false });
     }

     render() {
     return (
        <View>
           <Modal visible={this.state.modalVisible}>
         <Container>
              <Header>
          <Left>
            <Button transparent onPress={() => this.closeModal()}>
              <Text>Back</Text>
            </Button>
          </Left>
        </Header>
        <Content>
          <ListItem>
            <Left>
              <Text>Cat Calling</Text>
            </Left>
            <Right>
              <CheckBox
                title="catCalling"
                checked={this.state.catCalling}
                onPress={this.handleCheckBoxes}
              />
            </Right>
          </ListItem>
          <ListItem>
            <Left>
              <Text>Big Puddle</Text>
            </Left>
            <Right>
              <CheckBox
                title="bigPuddle"
                checked={this.state.bigPuddle}
                onPress={this.handleCheckBoxes}
              />
            </Right>
          </ListItem>
          <ListItem>
            <Left>
              <Text>Scaffolding</Text>
            </Left>
            <Right>
              <CheckBox
                title="scaffolding"
                checked={this.state.scaffolding}
                onPress={this.handleCheckBoxes}
              />
            </Right>
          </ListItem>
          <ListItem>
            <Left>
              <Text>Sidewalk Closed</Text>
            </Left>
            <Right>
              <CheckBox
                title="sidewalkClosed"
                checked={this.state.sidewalkClosed}
                onPress={this.handleCheckBoxes}
              />
            </Right>
          </ListItem>
          <ListItem>
            <Left>
              <Text>Lights Out</Text>
            </Left>
            <Right>
              <CheckBox
                title="lightsOut"
                checked={this.state.lightsOut}
                onPress={this.handleCheckBoxes}
              />
            </Right>
          </ListItem>
          <ListItem>
            <Left>
              <Text>Snow Piles</Text>
            </Left>
            <Right>
              <CheckBox
                title="snowPiles"
                checked={this.state.snowPiles}
                onPress={this.handleCheckBoxes}
              />
            </Right>
          </ListItem>
        </Content>
      </Container>
    </Modal>
    <Button transparent onPress={() => this.openModal()}>
      <Text style={{ color: "white" }}>Filter</Text>
       </Button>
       </View>
     );
   }
}

import React，{Component}来自“React”；
从“react native”导入{Modal，View}；
进口{
集装箱，
标题，
内容,，
文本，
正确的，
左边
按钮
列表
列表项，
复选框
}来自“本土基地”；
导出默认类FilterModal扩展组件{
构造函数（）{
超级（）；
此.state={
modalVisible:错误，
猫叫：错，
大坑：错，
脚手架：错，
不公开：错误，
莱特苏特：错，
雪堆：错
};
}
HandleCheckBox=e=>{
this.setState（{[e.target.title]：！e.target.checked}）；
};
openModal（）{
this.setState（{modalVisible:true}）；
}
closeModal（）{
this.setState（{modalVisible:false}）；
}
render（）{
返回(
this.closeModal（）}>
返回
猫叫
大水坑
脚手架
人行道关闭
熄灯
雪堆
this.openModal（）}>
滤器
);
}
}

您可以在onPress函数调用中直接设置状态

import React, { Component } from "react";
import { Modal, View } from "react-native";
import {
  Container,
  Header,
  Content,
  Text,
  Right,
  Left,
  Button,
  List,
  ListItem,
  CheckBox
} from "native-base";

export default class FilterModal extends Component {
  constructor() {
    super();
    this.state = {
      modalVisible: true,
      catCalling: false,
      bigPuddle: false,
      scaffolding: false,
      sidewalkClosed: false,
      lightsOut: false,
      snowPiles: false
    };
  }
  openModal() {
    this.setState({ modalVisible: true });
  }
  closeModal() {
    this.setState({ modalVisible: false });
  }
  render() {
    return (
      <View>
        <Modal visible={this.state.modalVisible}>
          <Container>
            <Header>
              <Left>
                <Button transparent onPress={() => this.closeModal()}>
                  <Text>Back</Text>
                </Button>
              </Left>
            </Header>
            <Content>
              <ListItem>
                <Left>
                  <Text>Cat Calling</Text>
                </Left>
                <Right>
                  <CheckBox
                    title="catCalling"
                    checked={this.state.catCalling}
                    onPress={() => this.setState({ catCalling: !this.state.catCalling })}
                  />
                </Right>
              </ListItem>
              <ListItem>
                <Left>
                  <Text>Big Puddle</Text>
                </Left>
                <Right>
                  <CheckBox
                    title="bigPuddle"
                    checked={this.state.bigPuddle}
                    onPress={() => this.setState({ bigPuddle: !this.state.bigPuddle })}
                  />
                </Right>
              </ListItem>
              <ListItem>
                <Left>
                  <Text>Scaffolding</Text>
                </Left>
                <Right>
                  <CheckBox
                    title="scaffolding"
                    checked={this.state.scaffolding}
                    onPress={() => this.setState({ scaffolding: !this.state.scaffolding })}
                  />
                </Right>
              </ListItem>
              <ListItem>
                <Left>
                  <Text>Sidewalk Closed</Text>
                </Left>
                <Right>
                  <CheckBox
                    title="sidewalkClosed"
                    checked={this.state.sidewalkClosed}
                    onPress={() => this.setState({ sidewalkClosed: !this.state.sidewalkClosed })}
                  />
                </Right>
              </ListItem>
              <ListItem>
                <Left>
                  <Text>Lights Out</Text>
                </Left>
                <Right>
                  <CheckBox
                    title="lightsOut"
                    checked={this.state.lightsOut}
                    onPress={() => this.setState({ lightsOut: !this.state.lightsOut })}
                  />
                </Right>
              </ListItem>
              <ListItem>
                <Left>
                  <Text>Snow Piles</Text>
                </Left>
                <Right>
                  <CheckBox
                    title="snowPiles"
                    checked={this.state.snowPiles}
                    onPress={() => this.setState({ snowPiles: !this.state.snowPiles })}
                  />
                </Right>
              </ListItem>
            </Content>
          </Container>
        </Modal>
        <Button transparent onPress={() => this.openModal()}>
          <Text style={{ color: "white" }}>Filter</Text>
        </Button>
      </View>
    );
  }
}

import React，{Component}来自“React”；
从“react native”导入{Modal，View}；
进口{
集装箱，
标题，
内容,，
文本，
正确的，
左边
按钮
列表
列表项，
复选框
}来自“本土基地”；
导出默认类FilterModal扩展组件{
构造函数（）{
超级（）；
此.state={
真的，
猫叫：错，
大坑：错，
脚手架：错，
不公开：错误，
莱特苏特：错，
雪堆：错
};
}
openModal（）{
this.setState（{modalVisible:true}）；
}
closeModal（）{
this.setState（{modalVisible:false}）；
}
render（）{
返回(
this.closeModal（）}>
返回
猫叫
this.setState（{catCalling:！this.state.catCalling}）}
/>
大水坑
this.setState（{bigpudle:！this.state.bigpudle}）
/>
脚手架
this.setState（{scaffolding:！this.state.scaffolding}）}
/>
人行道关闭
this.setState（{sidekclosed:！this.state.sidekclosed}）
/>
熄灯
this.setState（{lightsOut:！this.state.lightsOut}）}
/>
雪堆
this.setState（{snowPiles:！this.state.snowPiles}）}
/>
this.openModal（）}>
滤器
);
}
}

不应该

！e、 target.checked

be

e.target.checked

？我相信你是对的，但它仍然不起作用。是否有一种方法可以在handleCheckbox函数中进行控制台日志或控制台警告，以查看它是否被调用？是的，只需将其添加到函数中即可。看见