Question

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

这是我的代码

const { 过敏原美食交货，节食，环境服务 } = 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);
}

Answer 2

声明这样的状态。state= {SelectedItem：[]}

在“ this.handleValueChange（item [0]）”中传递当前美食名称
在this.handleValueChange（item）函数上，

检查当前项目是否存在于this.state.selectedItem中？然后弹出，否则将其推入数组。并保存状态。

按下“应用”按钮时的Console.log（this.state.selectedItem）

希望这会有所帮助。

如何处理多个复选框

2 个答案: