在本机反应中获取开关的标签值答案

【问题标题】：Fetching label value of switch in react native在本机反应中获取开关的标签值
【发布时间】：2019-11-06 17:17:15
【问题描述】：

我想在 react-native 中使用 switch 来实现 checkbox 的功能，因为 不支持复选框ios 设备。我不知道如何获取与特定 switch 关联的标签值。所以，我的想法是，我有一堆选项，比如 A、B、C，每个选项都与一个 switch 相关联，还有一个 submit 按钮。点击 submit 我想获取那些被打开的选项的标签。

这是用于选择各种选项的代码，每个选项都与一个开关相关联，

       <Text>A</Text>
       <Switch
           onValueChange = {this.handleToggle}
           value = {toggleValue}
       />
       <Text>B</Text>
       <Switch
           onValueChange = {this.handleToggle}
           value = {toggleValue}
       />
       <Text>C</Text>
       <Switch
           onValueChange = {this.handleToggle}
           value = {toggleValue}
       />

handleToggle 代码是这样的，

handleToggle = event => {
    this.setState(state => ({
        toggleValue: !state.toggleValue
    }));
}

非常感谢。

【问题讨论】：

标签： reactjs react-native checkbox react-native-component

【解决方案1】：

您对不同的开关使用相同的功能，单击其中一个不会让您访问该特定开关的标签。为此，我建议像这样构建它。这可能是一个可行的解决方案：

从一个看起来像这样的数组开始：

this.state = {
   data = [
      {
       label: "firstSwitch",
       checked: false,
      },
      {
       label: "secondSwitch",
       checked: false,
      }
   ]
}

然后，在您的渲染中：

this.state.data.map((item, index) => <Fragment>
      <Text>{item.label}</Text>
      <Switch 
      onValueChange = {() => this.handleToggle(index)}
      />
   </Fragment>
)

handleToggle 将更新作为参数传递的位置的数组：

handleToggle = index => {
   let tempArr= this.state.data
   tempArr[index].checked = !tempArr[index].checked
   this.setState({data:tempArr})
}

然后提交按钮将检查选中的开关：

onSubmit = () => {
   let arrOfCheckedSwitches= []
   this.state.data.forEach (item => item.checked && arrOfCheckedSwitches.push(item.label))
   console.log("array of labels :", arrOfCheckedSwitches)
}

如果有不清楚的地方请告诉我

【讨论】：