Question

我在平面列表中创建了checkbox，但是当我单击复选框时，所有复选框都会呈现。我要呈现未按整个复选框的复选框。

这是我的代码：

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。

您必须使用自己的状态创建一个checkBox组件，或者在用于呈现不同项目的列表中更新变量。

例如：

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）更改复选框的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})
}

Answer 2

在触发item.id时将onPress保存为状态

示例：

this.state = {
    checked : null
}

然后在您的复选框中：

<CheckBox
  checked={this.state.checked === item.id}
  onPress={() => this.setState({checked: item.id})}
/>

OR

您可以这样做

this.state = {
  list: list,
},

然后在您的flatlist

中

          <FlatList
              keyExtractor={this.keyExtractor}
              data={this.state.list}
              renderItem={({item, index}) =>

                  <ListItem>
                      <Left>
                          <Text>{item.name}</Text>
                      </Left>
                      <Right>
                            <CheckBox
                              checked={item.checked}
                              onPress={() => this.onCheck(item,index)}
                            />
                      </Right>
                  </ListItem>

              }
              extraData={this.state}
          />

oncheck功能

onCheck = (item, i) => {
      let items = this.state.list;
      items[i].checked = items[i].checked ? ! items[i].checked : true
      this.setState({list:items})

    }

react-native：如何在平面列表中呈现复选框

2 个答案: