Question

当我在循环中使用并单击后再单击任意一个，然后选择“检查所有循环”复选框给我解决方案时，如何使用带差异键的循环复选框

Answer 1

您可以创建以下状态的解决方案数组：

...
state.solutions = [
  {value:false},
  {value:false},
  {value:false}  
]

创建一个更改事件处理程序：

changeEvent = (ev, index) => {
  let tmp_solution = [...state.solutions];
  tmp_solutions[index].value = !tmp_solutions[index].value;
  this.setState({solutions: tmp_solution})
}

创建复选框渲染功能：

const checkBoxes = this.state.solutions.map((index) =>{
  return(
    <CheckBox 
      value={this.state.solutions[index].value} 
      onValueChange={(ev) => this.changeEvent(ev, index)} key={index} 
    />
  )
});

呈现所有复选框：

render() {
  <View>
    {checkBoxes}
  </View>
}
...

对不起，如果有错误

Answer 2

好吧，假设您有一个数据，那么您可以使用map来做到这一点。为了保存答案，您还可以在setSetate中使用索引，如下所示。我使用react-native-checkbox-heaven组件来具有复选框：

import CheckBox from 'react-native-checkbox-heaven';
renderContentCheckBox=()=>{
         console.log("[renderContent] your data", this.state.data);
            return Object.keys(this.state.data).map(function (item, index) {

              return (<View key={index} style={{  alignItems: 'flex-start', justifyContent: 'flex-start', width: Dimensions.get('window').width / 1.1, }}>
                       <CheckBox
                        label={item.title}
                        labelStyle={styles.labelStyle}
                        iconSize={28}
                        iconName='matMix'
                        checked={this.state.check1}
                        checkedColor='#44FF00'
                        uncheckedColor='#FFFFFF'
                        onChange={(val) => {(value) => { that.setState({ ["CheckBox" + index]: value,   }); console.log("radio" + index, value);
                            }}
                        />

                    </View>
                   );
            }
}

然后您可以在渲染器中使用它：

render() {

return (<View>
  {this.renderContentCheckBox(this)}
    </View>
 );
}

如何在天真的循环中使用复选框

2 个答案: