Question

我遇到了React-Native的问题。我有一个FlatList，其中每个项目都包含用户的图片（30x30），用户名和一个复选框。这些元素包装在TouchableHighlight中：

handleClick = (item, index) => {
  console.log(item);
  console.log(index);
}

render() {
  return (
    <FlatList    
      data={datas}
      renderItem={({item, index}) => this.renderUserItem(item, index)}
    />
  );
}

renderUserItem(item, index) {
  return (
    <TouchableHighlight onPress={() => this.handleClick(this, index)}>
      <View>
        <Image source={{uri: 'https://randomuser.me/api/portraits/women/68.jpg'}}/>
        <Text>{item.name}</Text>
        <CheckboxComponent/>
      </View>
    </TouchableHighlight>
  );
}

我想做的是，如果用户单击较大的TouchableHighlight（不仅是CheckboxComponent），那么CheckboxComponent是否被“选中”。如何访问列表中的CheckboxComponent？我应该使用ref吗？如果是，请提供一个处理列表的示例吗？

谢谢

乌戈

Answer 1

要保持CheckboxComponent的状态，您应该使用状态而不是

你可以做到

在构造函数中：

constructor(props) {
   super(props);

   this.state = {
       activeCheckbox: null
   }
}

在 renderUserItem：

<CheckboxComponent checked={this.sate.activeCheckbox === index} />

（您知道CheckboxComponent必须已选中道具）

在手柄点击中：

handleClick = (item, index) => {
   this.setState({ activeCheckbox: index });
}

单击后从FlatList及其子项检测项目

1 个答案: