javascript - How to handle checkbox fetching from json using react-native-element checbox with FlatList React Native? - Stack Ov

admin管理员组

文章数量:1278912

I'm trying to create dynamic checkbox with the name fetching from json, this issue looks same as I need, but without the code explaining, I can't archieve my goal,

I have a json example like this :

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

and with this code below:

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

the checkbox running well but it's just showing 2nd value of json

My Goal is to displaying all of json value into flatlist and makes checkbox running well,

For now I just can displaying those json into FlatList, but the checkbox is not works

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

anyone can help me how to archieve my goal?

I'm trying to create dynamic checkbox with the name fetching from json, this issue looks same as I need, but without the code explaining, I can't archieve my goal,

I have a json example like this :

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

and with this code below:

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

the checkbox running well but it's just showing 2nd value of json

My Goal is to displaying all of json value into flatlist and makes checkbox running well,

For now I just can displaying those json into FlatList, but the checkbox is not works

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

anyone can help me how to archieve my goal?

• javascript
• json
• react-native
• checkbox

Share Improve this question Follow asked Mar 20, 2018 at 3:36 flixflix 1,98455 gold badges3737 silver badges7272 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

The answer that Ahsan Ali provided will work. However it is missing a very vital line of code.

• Within the <FlatList/> ponent, be sure to add this extraData ={this.state}. This will allow the FlatList ponent to re-render whenever the state is changed.

The render method will then look like this:

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]} />
      }
    />
  );
}

By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop parison will not show any changes.

More information can be found at React-Native Flat-List documentation here.

---

If you're using the code from Ahsun Ali's post, there may be another error you e across.

• A warning error displays that the ponentWillMount() method is deprecated. In which case be sure to use the ponentDidMount() instead.

Hope this helps people!

You need to fill up the checked array in order to manipulate it after.

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

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

and pass the index of the selected checkbox to update it

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]} />
      }
    />
  );
}

I hope it helps!

you could try this for multiple selection, ref link-> https://facebook.github.io/react-native/docs/flatlist

class MyListItem extends React.PureComponent 
{
 _onPress = () => {
 this.props.onPressItem(this.props.id);
 };
 render() {
const textColor = this.props.selected ? 'red' : 'black';
return (
  <TouchableOpacity onPress={this._onPress}>
    <View>
      <Text style={{color: textColor}}>{this.props.title}</Text>
    </View>
  </TouchableOpacity>
   );
   }
   }
   class MultiSelectList extends React.PureComponent {
   state = {selected: (new Map(): Map<string, boolean>)};

   _keyExtractor = (item, index) => item.id;

    _onPressItem = (id: string) => {
    // updater functions are preferred for transactional updates
     this.setState((state) => {
     // copy the map rather than modifying state.
     const selected = new Map(state.selected);
     selected.set(id, !selected.get(id)); // toggle
     return {selected};
      });
      };
     _renderItem = ({item}) => (
      <MyListItem
     id={item.id}
     onPressItem={this._onPressItem}
     selected={!!this.state.selected.get(item.id)}
     title={item.title}
     />
     );
     render() {
     return (
     <FlatList
     data={this.props.data}
     extraData={this.state}
     keyExtractor={this._keyExtractor}
     renderItem={this._renderItem}
     />
      );
      }
      }
     for(const ele of  this.state.selected.keys())
      console.log(ele);
      //**after that you could get all the selected keys or values from something like this**

本文标签：