在 React Native 中获取开关的标签值

Question

我想在 react-native 中使用 switch 实现 checkbox 的功能，因为 ios 设备 不支持复选框。我不知道如何获取与特定 switch 关联的标签值。所以，我的想法是，我有一堆选项，比如 A、B、C，每个选项都与一个 switch 相关联，并且有一个 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
    }));
}

非常感谢。

Answer 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)
}

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

在 React Native 中获取开关的标签值

Fetching label value of switch in react native

checkbox

reactjs

react-native

react-native-component