javascript - React-native:按下其他复选框时重置复选框状态

Question

我有多个复选框，用户可以更改状态。但我只想激活一个复选框。当另一个复选框被选中时，如何重置其他复选框的状态？

这是我的代码:

const list = [
  {
    name: 'Kevin ',
    id:0,
    checked:false
  },
  {
    name: 'John',
    id:1,
    checked:false
  },
  {
    name: 'Mark',
    id:2,
    checked:false
  },
]


export default class SelectPetScreen extends Component {
  constructor(props) {
    super(props)
    this.state = {
      checked: false,
      list: list
    }
  }

keyExtractor = (item, index) => index.toString()

checkThisBox=(itemID)=>{
   let list = this.state.list
   list[itemID].checked =! list[itemID].checked
   this.setState({list:list})
}

renderItem = ({ item }) => (
  <TouchableHighlight
  onPress={() => this.checkThisBox(item.id)}>
  <ListItem
    containerStyle={styles.cardStyle}
    title={<View><Text>{item.name}</Text></View>}
    rightAvatar={
      <View style={{marginRight:20}}>
      <CheckBox
        checked={this.state.list[item.id].checked}
        onPress={() => this.checkThisBox(item.id)}
      />
      </View>
    }
    >
    </ListItem>
    </TouchableHighlight>

)
  render() {
  return(
      <View style={styles.container}>
          <FlatList
               keyExtractor={this.keyExtractor}
               data={this.state.list}
               renderItem={this.renderItem}
               extraData={this.state}
             />
      </View>
    </SafeAreaView>
    )
  };
}

当选择其他复选框时是否可以重置复选框之前的状态？任何建议或意见将非常感激!

Answer 1

checkThisBox= itemID => {
  const updatedList = this.state.list.map( item => item.id === itemId ?  {...item, checked:true} :  {...item, checked:false} );
  this.setState({list:updatedList})
}

试试这个。