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

尝试一下。

Answer 2

您可以重置所有复选框的状态，然后更新新的复选框：

checkThisBox=(itemID)=>{
    let list = this.state.list
    list.forEach(option => {
        option.checked = false
    });
    list[itemID].checked = true
    this.setState({ list: list })
}

Answer 3

据我了解，您要执行的操作是有一个项目列表，列表中的每个项目都有一个复选框，并且当您按下一个复选框时，所有复选框都会更新。尝试以下解决方案：

checkThisBox=(value, index)=>{
  const tempData = this.state.list;
  tempData[index].checked= value;
  this.setState({ 
    list: tempData, 
  });
}

然后在您的单位列表中添加extraData={this.state}属性以更新该单位列表，否则它不会更新您的列表。

希望它会有所帮助..！

react-native：按下其他复选框时重置复选框状态

3 个答案: