javascript - 如何处理多个复选框

Question

我正在开发一个项目，需要根据已检查项目来过滤结果。我想从不同类别中选择一个或多个项目，并且还想通过单击应用按钮来consol.log(...)所选项目以了解哪些项目项目已被选择。这是屏幕的屏幕截图

这是我的代码

常量{ 过敏原， 美食, 交货， 饮食, 环境, 服务 } = this.state.data;

      <View style={styles.sliderContainer}>
        {allergens !== null && allergens !== undefined ? (
          <View>
            <Text style={styles.sliderLabel}>Allergens:</Text>
            {allergens.map((item, index) => {
              return (
                <View style={styles.checkBoxContainer} key={index}>
                  <Text style={{ fontSize: 16 }}>
                    {item && item[0]}{" "}
                    <Text style={{ fontSize: 16, color: "red" }}>
                      ({item && item[1]})
                    </Text>
                  </Text>
                  <CheckBox
                        checked={false}
                        onPress={() => this.handleValueChange()}
                  />
                </View>
              );
            })}
          </View>
        ) : null}
      </View>
<View style={styles.sliderContainer}>
            {environments !== null && environments !== undefined ? (
              <View>
                <Text style={styles.sliderLabel}>Environments:</Text>
                {environments.map((item, index) => {
                  return (
                    <View style={styles.checkBoxContainer} key={index}>
                      <Text style={{ fontSize: 16 }}>
                        {item && item[0]}{" "}
                        <Text style={{ fontSize: 16, color: "red" }}>
                          ({item && item[1]})
                        </Text>
                      </Text>
                      <CheckBox
                        checked={false}
                        onPress={() => this.handleValueChange()}
                      />
                    </View>
                  );
                })}
              </View>
            ) : null}
          </View>
          <View style={styles.sliderContainer}>
            {cuisine !== null && cuisine !== undefined ? (
              <View>
                <Text style={styles.sliderLabel}>Cuisine:</Text>
                {cuisine.map((item, index) => {
                  return (
                    <View style={styles.checkBoxContainer} key={index}>
                      <Text style={{ fontSize: 16 }}>
                        {item && item[0]}{" "}
                        <Text style={{ fontSize: 16, color: "red" }}>
                          ({item && item[1]})
                        </Text>
                      </Text>
                      <CheckBox
                        checked={false}
                        onPress={() => this.handleValueChange()}
                      />
                    </View>
                  );
                })}
              </View>
            ) : null}
          </View>

这是来自API的数据

"cuisine": [
                    [
                        "Middle Eastern",
                        4
                    ],
                    [
                        "Western",
                        4
                    ],
                    [
                        "Pasta Dishes",
                        2
                    ],
                    [
                        "Salad",
                        2
                    ],
                    [
                        "Mexican",
                        1
                    ],
                    [
                        "Soup",
                        1
                    ],
                    [
                        "snacks",
                        1
                    ]
                ],
                "allergens": [
                    [
                        "Halal",
                        14
                    ]
                ],
                "environments": [
                    [
                        "Mexican",
                        15
                    ]
                ],

如何选择或取消选择项目而不影响其他项目？ 这个问题的解决办法是什么。如果这种方法不好，那么完成这项任务的替代方案是什么。提前致谢。

Answer 1

更新:使用 React + JSX 的工作示例:

https://codesandbox.io/s/vigilant-snyder-kxh67

您可以尝试以下方法:

<View style={styles.sliderContainer}>
        {allergens !== null && allergens !== undefined ? (
          <View>
            <Text style={styles.sliderLabel}>Allergens:</Text>
            {allergens.map((item, index) => {
              const key = `checkbox_${index}_value`;
              return (
                <View style={styles.checkBoxContainer} key={index}>
                  <Text style={{ fontSize: 16 }}>
                    {item && item[0]}{" "}
                    <Text style={{ fontSize: 16, color: "red" }}>
                      ({item && item[1]})
                    </Text>
                  </Text>
                  <CheckBox
                        onChange={() => this.handleValueChange(index)}
                        value={ this.state[key] || false }
                  />
                </View>
              );
            })}
          </View>
        ) : null}
      </View>

handleValueChange = (index) => {
   const key = `checkbox_${index}_value`;
   const newValue = !!!this.state[key];
   this.setState({
     [key]: newValue,
   }, () => {
     console.log('value changed: ', index, newValue);
   });

}

获取所有值:

getCheckboxes = () => {
  const values = this.state.data.allergens.map((v, index) => {
    const key = `checkbox_${index}_value`;
    const value = this.state[key] || false;
    return { index, value };
  });
  console.log('Checkboxes values: ', values);
}