Question

我想通过 react-native 中的开关实现复选框的功能，因为不支持该复选框ios设备。我不知道如何获取与特定开关相关的标签值。因此，我的想法是，我有很多选项，例如A，B，C，每个选项都与一个开关相关联，并且有一个 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)
}

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

在本地响应中获取开关的标签值

1 个答案: