1

我想通过react-native中的开关来实现复选框的功能，因为ios devices不支持复选框。我不知道如何获取与特定开关关联的标签值。所以，我的想法是，我有一堆选项，比如 A、B、C，每个选项都与一个switch相关联，并且有一个提交按钮。单击提交时，我想获取已打开的那些选项的标签。

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

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

非常感谢。

4

1 回答 1

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

让我知道是否有不清楚的地方

于 2019-11-06T09:17:15.900 回答