0

我正在使用带有复选框的平面列表。该复选框应该被选中，即 true，当我取消选中它时，它应该将所有选中的复选框推送到数组。然后我需要实现 api，我会在响应中得到取消选中的项目，然后我需要在 flatlist 中显示。which item.id 将出现在需要取消选中 id 的响应中。

代码是

   <FlatList
     data={global.data_params}
     renderItem={({ item,index }) =><AlertItem item={item}/>}

   />

和组件是

const [state, setstate] = useState(isChecked?isChecked:true)
console.log('state',state)
return (
<View style={{ flexDirection: "row",
marginBottom: 20,}}>
  
    <CheckBox
 
    checked={state}
onPress={() => setstate(!state)}
  
      style={{alignSelf: "center"}}
    />
    <Text style={{    margin: 8,
}}>{item.name}</Text>
  </View> )

当我单击提交时，我需要使用取消选择复选框传递数组，并且在点击该 api 后将点击另一个 api，它将返回未选中复选框的结果，所以我的问题是我如何显示未选中的复选框来自 api第二次。

在此处输入图像描述

而且我最初需要在所有复选框上显示勾号。

4

2 回答 2

2

首先把你的状态变成这样

   power: [
      {value: 0, text: 'low voltage', selected: false},
      {value: 1, text: 'power', selected: false},
      {value: 2, text: 'electricity', selected: false},
      {value: 3, text: 'power button', selected: false},
     
    ],

然后在您的渲染之前制作新的数组变量和复选框的 onchange 将您选择的项目推送到 newTrueArray

  let newTrueArray = [];
    this.state.power.forEach((val) => {
      if (val.selected) {
        newTrueArray.push(val.value);
      }
    
    });

然后为了更新你的复选框，你可以做这样的事情

 updateCheckBox = (index, newSelected) => {
    let newArr = [...this.state.power];
    newArr[index].selected = newSelected;
    this.setState({purpose: newArr});
  };

并在您的 UI 中显示复选框选项，请这样做

 {this.state.power.map((val, index) => {
          return (
            <ListItem noBorder>
              <Left>
                <Text style={{marginLeft: 30, color: 'gray', marginTop: 10}}>{val.text}</Text>
              </Left>
              <Right>
                <CheckBox
                  color="#0080af"
                  onPress={() =>
                    this.updateCheckBox(index, !val.selected)
                  }
                  checked={val.selected}
                  style={styles.check}
                />
              </Right>
            </ListItem>
于 2021-03-11T11:29:34.723 回答
0

然后你可以简单地把你的数据放在像这样的状态

  power: [
      {value: 0, text: {item.firstname}, selected: false},
      {value: 1, text: '{item.secondname}', selected: false},  
    ],

如果有帮助，请为答案投票

于 2021-03-11T11:37:32.933 回答