我的handleCheckBox函数遇到了问题

I added an onPress function to each check box to change the state from "false" (of the targets name) to "true" but when I compile the code the checkbox stays blank. I made states for names of the checkboxes, then my handleCheckbox function changes the e.target.name state to !e.target.checked which starts as false. Thank you all in advance.

我在每个复选框中添加了一个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>
     );
   }
}

1 个解决方案

#1

you can directly set the state in onPress function call.

你可以直接在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>
    );
  }
}