javascript - react native : How to render check box inside flatlist

Question

我在平面列表中创建了一个复选框，但是当我单击该复选框时，所有复选框都会呈现。我想渲染我按下的复选框而不是整个复选框。

这是我的代码:

const list = [
  {
    name: 'Kevin',
    id:0
  },
  {
    name: 'John',
    id:1
  },
]
export default class TestingScreen extends Component {
  constructor(props) {
    super(props)
    this.state = {
      checked: false
    }
  }

  handleCheckBox = () => this.setState({ checked: !this.state.checked })

  renderItem = ({ item }) => (
    <ListItem
      title={<View><Text>{item.name}</Text></View>}r
      leftAvatar={
        <View>
        <Image
                  style={{width:50, height:50,borderRadius:25 }}
                  source={require('../Components/Assets/oval.png')} />
        </View>
      }
      rightAvatar={
        <CheckBox
          checked={this.state.checked}
          onPress={() => this.setState({checked: !this.state.checked})}
        />
      }
    >
    </ListItem>

  )

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

有没有办法可以渲染我按下的复选框？ 任何评论或建议都会非常有帮助，谢谢! :)

Answer 1

您对所有复选框使用相同的状态变量。单击其中一个复选框将更新您为所有复选框指定的单个全局变量 checked。

您必须创建一个具有自己状态的复选框组件，或者更新用于呈现不同项目的列表内的变量。

例如:

1)将列表变量移动到添加选中键的状态内:

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



 this.state = {
  list: list
}

2)使用状态到flatList数据中:

<FlatList
     keyExtractor={this.keyExtractor}
     data={this.state.list}
     renderItem={this.renderItem}
     extraData={this.state}
/>

3)更改checkBox的onPress:

<CheckBox
      checked={this.state.list[item.id].checked}
      onPress={() => this.checkThisBox(item.id)}
    />

地点:

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