如何使用带有FlatList React Native的react-native-element checbox处理来自json的复选框？

Question

我正在尝试使用从json提取名称创建动态复选框，此问题与我需要的相同，但是如果没有代码说明，我无法实现我的目标，

我有一个像这样的json示例：

this.state = {
  data : [
  {
    "name": "ALL",
  },
  {
    "name": "Android",
  },
  {
    "name": "iOS",
  },
  {
    "name": "React Native",
  }
]}

并使用以下代码：

<CheckBox
  center
  title={this.state.data[1].name}
  onPress={() => {this.setState({checked: !this.state.checked})}}
  checked={this.state.checked}
/>

复选框运行良好，但仅显示json的第二个值

我的目标是将所有json值显示到清单中，并使复选框正常运行，

现在，我只能将这些json显示到FlatList中，但是该复选框不起作用

import React, { Component } from 'react';
import {
  Text, View, StyleSheet, Alert, FlatList
} from 'react-native';
import Dimensions from 'Dimensions';
import { CheckBox } from 'react-native-elements'

const DeviceWidth = Dimensions.get('window').width;
const DeviceHeight = Dimensions.get('window').height;

class MedicalClearlance extends React.Component {

  constructor(props){
    super(props); 
    this.state = {
      checked:[],
      data : [
      {
        "name": "ALL",
      },
      {
        "name": "Android",
      },
      {
        "name": "iOS",
      },
      {
        "name": "React Native",
      }
    ]}
  }

  render() {
    return (
      <FlatList
        data={ this.state.data }
        renderItem={({item, index}) =>
        <CheckBox
          center
          title={item.name}
          onPress={() => {this.setState({checked: !this.state.checked}), console.log(this.state.checked +' '+ index)}}
          checked={this.state.checked}/>
        }
      />
    );
  }
}

任何人都可以帮助我如何实现我的目标？

Answer 1

您需要填充checked数组才能在之后对其进行操作。

constructor() {
  super();
  this.state = {
    data: [
      {
        "name": "ALL",
      },
      {
        "name": "Android",
      },
      {
        "name": "iOS",
      },
      {
        "name": "React Native",
      }
    ],
    checked: []
  }
}

componentWillMount() {
  let { data, checked } = this.state;
  let intialCheck = data.map(x => false);
  this.setState({ checked: intialCheck })
}

并传递index所选复选框的更新它

handleChange = (index) => {
  let checked = [...this.state.checked];
  checked[index] = !checked[index];
  this.setState({ checked });
}

render() {
  let { data, checked } = this.state;
  return (
    <FlatList
      data={data}
      renderItem={({ item, index }) =>
        <CheckBox
          center
          title={item.name}
          onPress={() => this.handleChange(index)}
          checked={checked[index]} />
      }
    />
  );
}

我希望它有帮助！

Answer 2

Ahsan Ali提供的答案将起作用。但是，它缺少非常重要的代码行。

• 在<FlatList/>组件内，请确保添加this extraData ={this.state}。每当状态改变时，这将允许FlatList组件重新呈现。

然后，render方法将如下所示：

handleChange = (index) => {
  let checked = [...this.state.checked];
  checked[index] = !checked[index];
  this.setState({ checked });
}

render() {
  let { data, checked } = this.state;
  return (
    <FlatList
      data={data}
      extraData={this.state}
      renderItem={({ item, index }) =>
        <CheckBox
          center
          title={item.name}
          onPress={() => this.handleChange(index)}
          checked={checked[index]} />
      }
    />
  );
}

通过将extraData = {this.state}传递给FlatList，我们确保当state.selected更改时，FlatList本身将重新呈现。如果不设置此道具，FlatList将不知道它需要重新渲染任何项目，因为它也是PureComponent，并且道具比较不会显示任何更改。

更多信息可以在此处的 React-Native Flat-List文档中找到。

如果您使用的是Ahsun Ali帖子中的代码，则可能会遇到另一个错误。

• 警告错误显示该componentWillMount()方法已过时。在这种情况下，请务必使用componentDidMount() 。

希望这对人们有所帮助！