如何在反应幼稚中使用循环中的复选框

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>
 );
}