如何在react-native中呈现多个组件并设置个别状态？

问题描述

我有一个组件将使用map来渲染多个复选框，并且每个复选框都有一个回调函数onPress获取道具，onPress函数将setState检查，但现在当我点击一个复选框时，所有复选框都将选择，它导致他们都使用相同的状态，目标我想选择每个复选框我只是ckick，我知道我可以写每个复选框的许多状态不同的onPress功能，但它看起来很愚蠢，我会添加更多未来的复选框，什么是解决任务的最佳和最灵活的方式？

I have a component will use map to render multi checkbox, and each checkbox has a callback function "onPress" get by props, the "onPress" function will setState checked, but now when I click on one checkbox, all checkboxs will be chosed, it cause they all use the same state, the goal I wanna choose each checkbox what I just ckick on, I know I can write many state different "onPress" function for each checkbox, but it looks stupid, I will add more checkbox in the future, What's the best and flexiable way to solve the task?

import React, { Component } from 'react'
import { View } from 'react-native'
import { CheckBox } from 'react-native-elements'

const styles = {
  CheckBox: {
    borderBottomWidth: 0.3,
    borderBottomColor: 'gray'
  },
  checkBox : {
    backgroundColor: "#ffffff",
    borderWidth: 0
  },
  text: {
    flex: 0.95,
    backgroundColor: "#ffffff"
  }
}

const languages = ["中文","英文","日文","韓文"]

class Language extends Component {

  constructor(props) {
    super(props);
    this.state = { checked: false };
  }

  onPress = () => {
    this.setState({ checked: !this.state.checked })
  }

  renderlanguages = () => {
    return languages.map((langauge) => {
      return(
        <View key = { langauge } style = { styles.CheckBox }>
         <CheckBox
            title = { langauge }
            iconRight
            containerStyle = { styles.checkBox }
            textStyle = { styles.text }
            checkedColor = 'red'
            checked = { this.state.checked }
            onPress = { this.onPress }
          />
        </View>
      )
    })
  }

  render(){
    return(
      <View>
        { this.renderlanguages() }
      </View>
    )
  }
}

export default Language;

行为是全选复选框，即使我现在只选择一个。

推荐答案

您只需传递 langauge （ 请注意，这可能是该函数的语言 ）变量的错误，我们可以识别正在检查哪一个

You can just pass the langauge (note this is probably a typo for language) variable to the function and us it to identify which one is being checked

  onPress = (langauge) => {
    this.setState({ [langauge]: { checked: !this.state[langauge].checked } })
  }

  renderlanguages = () => {
    return languages.map((langauge) => {
      return(
        <View key = { langauge } style = { styles.CheckBox }>
         <CheckBox
            title = { langauge }
            iconRight
            //component = { () => {return <TouchableOpacity></TouchableOpacity>}}
            containerStyle = { styles.checkBox }
            textStyle = { styles.text }
            checkedColor = 'red'
            checked = { this.state[langauge].checked }
            onPress = { () => this.onPress(langauge) }
          />
        </View>
      )
    })
  }

这篇关于如何在react-native中呈现多个组件并设置个别状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！