Question

我获得了一个可供用户选择的主题列表，然后我将根据他们选择的主题进行api调用，所有这些都可以正常工作，但是我需要将文本更改为复选框

这是我的状态：

     this.state = {
      loading: false,
      dataSource: [],
      error: null,
      topic: '',
  }

这是我的api调用：

   getUsers = () => {
    fetch('https://someapi.com/?topic=' + this.state.topic, {method: 'GET'}).then((response) => response.json()).then((responseJson) => {
      this.setState({
        loading: false,
        error: responseJson.error || null,
        dataSource: responseJson.data.users,
      });
    }).catch((error) => {
      this.setState({error, loading: false});
    });
  }

以下是我在渲染方法中可以正常使用的主题，但我需要将文本更改为复选框：

    <View>
     <Text onPress={(text) => this.setTopic('topic-slug1')}>Some Topic</Text>
     <Text onPress={(text) => this.setTopic('topic-slug2')}>Some Topic</Text> 
     <Text onPress={(text) => this.setTopic('topic-slug3')}>Some Topic</Text>           
    </View>

这是setTopic()函数：

   setTopic(searchedTopic) {
    this.setState({topic: searchedTopic});
  }

我只需要使用安装了<Text>的复选框即可在 Android 和 IOS

上同时使用

Answer 1

请确保您必须根据复选框为true或false添加条件

这是一个带有插件的演示：https://github.com/crazycodeboy/react-native-check-box#readme

constructor(props){
    super(props);
    this.state = {
        topic: null,
        checkTopic1: false,
        checkTopic2: false,
        checkTopic3: false,
    }
}

setTopic = (slug) => {
    if(slug == "topic-slug1"){
        this.setState({
            checkTopic1:!this.state.checkTopic1
        })
    }else if(slug == "topic-slug2"){
        this.setState({
            checkTopic2:!this.state.checkTopic2
        })
    }else if(slug == "topic-slug3"){
        this.setState({
            checkTopic3:!this.state.checkTopic3
        })
    }
    this.setState({
        topic: slug
    })
    this.getUsers();
}

getUsers = () => {
    fetch('https://someapi.com/?topic=' + this.state.topic, {method: 'GET'}).then((response) => response.json()).then((responseJson) => {
      this.setState({
        loading: false,
        error: responseJson.error || null,
        dataSource: responseJson.data.users,
      });
    }).catch((error) => {
      this.setState({error, loading: false});
    });
}


<View>
    <CheckBox
        style={{flex: 1, padding: 10}}
        onClick={()=> this.setTopic('topic-slug1')}
        isChecked={this.state.checkTopic1}
        leftText={"Some Topic"}
    />
    <CheckBox
        style={{flex: 1, padding: 10}}
        onClick={()=> this.setTopic('topic-slug2')}
        isChecked={this.state.checkTopic2}
        leftText={"Some Topic"}
    />
    <CheckBox
        style={{flex: 1, padding: 10}}
        onClick={()=> this.setTopic('topic-slug3')}
        isChecked={this.state.checkTopic3}
        leftText={"Some Topic"}
    />
</View>

如何在React Native中使用复选框

1 个答案: